ACF image repeater, second text container repeater. Flexbox collapsing on mobile

• bradfranklin

• July 7, 2022 at 3:51 am

I’m having trouble getting Flexbox on mobile, media queries to work correctly.
flex-wrap: wrap; isn’t working (works after device rotation) with media query on mobile.
Child container collapses into container above (please see picture) : /

clear: both; not an option with flexbox. Any ideas most appreciated.

			<div class="v-images__container">
			<?php
				if ( have_rows( 'mws_images' ) ) {
 					while ( have_rows( 'mws_images' ) ) {
 						the_row(); ?>
						<div class="v-showcase-image__container">
						<?php $image = get_sub_field( 'mws_showcase_image' ); ?>
						<img src="<?php echo esc_url( $image ); ?>" alt=""></div>
						<div class="v-showcase-image-description__container"><?php the_sub_field( 'mws_showcase_image_description' ); ?></div>
 					<?php
 				}
				}		
			?>					
			</div>

ACF repeater code in single-bmw-model.php template

https://codeshare.io/1YM8A3

________

/* ACF CPT VEHICLE - START css */

.v-images__container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.v-showcase-image__container {
	flex: 1 1 60%;
	max-width: 60%;
	padding: 40px;
//	background-color: red;
}

.v-showcase-image-description__container {
	flex: 1 1 220px;
	max-width: 40%;
	padding: 40px;
	background-color: lime;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 768px) {
  .v-images__container {
    flex-direction: column;
  }
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 768px) {
.v-showcase-image__container {
	flex: 1 1 100%;
	max-width: 100%;
	padding: 40px;
	}
}