Responsive for Iphone 6, 7 & 8 PLUS

[creativepanda]

Hello all!

I’m developing a webshop with woocommerce. It’s pretty much done, except for one thing I can’t seem to fix. There’s a table with images to go to the different colors on the page. It works perfectly on laptop, desktop and most of mobile devices. Except for the Iphone 6,7 and 8 plus. I can’t seem to fix this. Does someone have an idea how I could try to fix this?

I’ve added an image of how it’s shown for iphone 6,7,8plus. It should be 2 rows with 3 columns.

I’m working with the latest version of woocommerce and wordpress, with theme Atelier.

[Gandalf]

Hello @creativepanda

Welcome to the forums. An image isn’t going to enable someone to help you. We need to see the code.

[creativepanda]

Thanks @Gandalf! I’m very new to being at a forum like this. Thanks for the info. I hope this is the code that’s needed:

		
<h1>Meest besteld</h1>

		</div>
	</div> </section>
 <section  class="row ">
	<div class="spb-column-container col-sm-2 col-xs-4  "   style="z-index: 0; ">
		<div class="spb-column-inner row clearfix" style="margin-top: 0px;margin-bottom: 0px;">
		 <section  class="row ">
	<div class="spb_content_element spb_image noframe col-sm-12 thumbnail-default square-corners">
		<div class="spb-asset-content"><figure class="animated-overlay overlay-style caption-hover clearfix" >
		<a class="img-link" href="https://schapenvachtkopen.nl/product-categorie/schapenvacht/?swoof=1&amp;pa_kleur=wit&amp;really_curr_tax=72-product_cat" target="_self"></a><div class="img-wrap"><img width="755" height="1000" src="https://schapenvachtkopen.nl/wp-content/uploads/2020/10/w1.jpg" class="attachment-full size-full" alt="" loading="lazy" /></div><div class="figcaption-wrap"></div><figcaption><div class="thumb-info">
<p><a href="https://schapenvachtkopen.nl/product-categorie/schapenvacht/?swoof=1&amp;pa_kleur=wit&amp;really_curr_tax=72-product_cat">Shop alle witte schapenvachten</a></p>
</div></figcaption></figure>
		</div>
	</div> </section>
 <section  class="row ">
	<div class="spb_content_element col-sm-12 spb_text_column">
		<div class="spb-asset-content" style="margin-top: 0px;margin-bottom: 0px;">
			
<p><a href="https://schapenvachtkopen.nl/product-categorie/schapenvacht/?swoof=1&amp;pa_kleur=wit&amp;really_curr_tax=72-product_cat">Shop alle witte schapenvachten</a></p>

		</div>
	</div> </section>
 
		</div>
	</div>  
	<div class="spb-column-container col-sm-2 col-xs-4  "   style="z-index: 0; ">
		<div class="spb-column-inner row clearfix" style="margin-top: 0px;margin-bottom: 0px;">
		 <section  class="row ">
	<div class="spb_content_element spb_image noframe col-sm-12 thumbnail-default square-corners">
		<div class="spb-asset-content"><figure class="animated-overlay overlay-style caption-hover clearfix" >
		<a class="img-link" href="https://schapenvachtkopen.nl/product-categorie/schapenvacht/?swoof=1&amp;pa_kleur=bruin&amp;really_curr_tax=72-product_cat" target="_self"></a><div class="img-wrap"><img width="755" height="1000" src="https://schapenvachtkopen.nl/wp-content/uploads/2020/11/bruin.jpg" class="attachment-full size-full" alt="schapenvacht bruin" loading="lazy" /></div><div class="figcaption-wrap"></div><figcaption><div class="thumb-info">
<p><a href="https://schapenvachtkopen.nl/product-categorie/schapenvacht/?swoof=1&amp;pa_kleur=bruin&amp;really_curr_tax=72-product_cat">Shop alle bruine schapenvachten</a></p>
</div></figcaption></figure>
		</div>
	</div> </section>
 <section  class="row ">
	<div class="spb_content_element col-sm-12 spb_text_column">
		<div class="spb-asset-content" style="margin-top: 0px;margin-bottom: 0px;">
			
<p><a href="https://schapenvachtkopen.nl/product-categorie/schapenvacht/?swoof=1&amp;pa_kleur=bruin&amp;really_curr_tax=72-product_cat">Shop alle bruine schapenvachten</a></p>

		</div>
	</div> </section>
 
		</div>
	</div>  
	<div class="spb-column-container col-sm-2 col-xs-4  "   style="z-index: 0; ">
		<div class="spb-column-inner row clearfix" style="margin-top: 0px;margin-bottom: 0px;">
		 <section  class="row ">
	<div class="spb_content_element spb_image noframe col-sm-12 thumbnail-default square-corners">
		<div class="spb-asset-content"><figure class="animated-overlay overlay-style caption-hover clearfix" >
		<a class="img-link" href="https://schapenvachtkopen.nl/product-categorie/huiden-en-vachten/?filter_soort=schapenvacht&amp;query_type_soort=or&amp;filter_kleur=grijs&amp;query_type_kleur=or" target="_self"></a><div class="img-wrap"><img width="755" height="1000" src="https://schapenvachtkopen.nl/wp-content/uploads/2020/10/g3.jpg" class="attachment-full size-full" alt="" loading="lazy" /></div><div class="figcaption-wrap"></div><figcaption><div class="thumb-info">
<p><a href="https://schapenvachtkopen.nl/product-categorie/schapenvacht/?swoof=1&amp;pa_kleur=grijs&amp;really_curr_tax=72-product_cat">Shop alle grijze schapenvachten</a></p>
</div></figcaption></figure>
		</div>
	</div> </section>
 <section  class="row ">
	<div class="spb_content_element col-sm-12 spb_text_column">
		<div class="spb-asset-content" style="margin-top: 0px;margin-bottom: 0px;">
			
<p><a href="https://schapenvachtkopen.nl/product-categorie/huiden-en-vachten/?filter_soort=schapenvacht&amp;query_type_soort=or&amp;filter_kleur=grijs&amp;query_type_kleur=or">Shop alle grijze schapenvachten</a></p>

		</div>
	</div> </section>
 
		</div>
	</div>  
	<div class="spb-column-container col-sm-2 col-xs-4  "   style="z-index: 0; ">
		<div class="spb-column-inner row clearfix" style="margin-top: 0px;margin-bottom: 0px;">
		 <section  class="row ">
	<div class="spb_content_element spb_image noframe col-sm-12 thumbnail-default square-corners">
		<div class="spb-asset-content"><figure class="animated-overlay overlay-style caption-hover clearfix" >
		<a class="img-link" href="https://schapenvachtkopen.nl/product-categorie/schapenvacht/?swoof=1&amp;pa_kleur=zwart&amp;really_curr_tax=72-product_cat" target="_self"></a><div class="img-wrap"><img width="755" height="1000" src="https://schapenvachtkopen.nl/wp-content/uploads/2020/12/zwarte_schapenvacht.jpg" class="attachment-full size-full" alt="zwarte schapenvacht" loading="lazy" /></div><div class="figcaption-wrap"></div><figcaption><div class="thumb-info">
<p><a href="https://schapenvachtkopen.nl/product-categorie/schapenvacht/?swoof=1&amp;pa_kleur=zwart&amp;really_curr_tax=72-product_cat">Shop alle zwarte schapenvachten</a></p>
</div></figcaption></figure>
		</div>
	</div> </section>
 <section  class="row ">
	<div class="spb_content_element col-sm-12 spb_text_column">
		<div class="spb-asset-content" style="margin-top: 0px;margin-bottom: 0px;">
			
<p><a href="https://schapenvachtkopen.nl/product-categorie/schapenvacht/?swoof=1&amp;pa_kleur=zwart&amp;really_curr_tax=72-product_cat">Shop alle zwarte schapenvachten</a></p>

		</div>
	</div> </section>
 
		</div>
	</div>  
	<div class="spb-column-container col-sm-2 col-xs-4  "   style="z-index: 0; ">
		<div class="spb-column-inner row clearfix" style="margin-top: 0px;margin-bottom: 0px;">
		 <section  class="row ">
	<div class="spb_content_element spb_image noframe col-sm-12 thumbnail-default square-corners">
		<div class="spb-asset-content"><figure class="animated-overlay overlay-style caption-hover clearfix" >
		<a class="img-link" href="https://schapenvachtkopen.nl/product-categorie/schapenvacht/?swoof=1&amp;pa_kleur=meerkleurig&amp;really_curr_tax=72-product_cat" target="_self"></a><div class="img-wrap"><img width="227" height="300" src="https://schapenvachtkopen.nl/wp-content/uploads/2020/10/2020-10-20-website-9903-bewerktNW-227x300.jpg" class="attachment-medium size-medium" alt="" loading="lazy" /></div><div class="figcaption-wrap"></div><figcaption><div class="thumb-info">
<p><a href="https://schapenvachtkopen.nl/product-categorie/schapenvacht/?swoof=1&amp;pa_kleur=meerkleurig&amp;really_curr_tax=72-product_cat">Shop alle meerkleurige schapenvachten</a></p>
</div></figcaption></figure>
		</div>
	</div> </section>
 <section  class="row ">
	<div class="spb_content_element col-sm-12 spb_text_column">
		<div class="spb-asset-content" style="margin-top: 0px;margin-bottom: 0px;">
			
<p><a href="https://schapenvachtkopen.nl/product-categorie/schapenvacht/?swoof=1&amp;pa_kleur=meerkleurig&amp;really_curr_tax=72-product_cat">Shop alle meerkleurige schapenvachten</a></p>

		</div>
	</div> </section>
 
		</div>
	</div>  
	<div class="spb-column-container col-sm-2 col-xs-4  "   style="z-index: 0; ">
		<div class="spb-column-inner row clearfix" style="margin-top: 0px;margin-bottom: 0px;">
		 <section  class="row ">
	<div class="spb_content_element spb_image noframe col-sm-12 thumbnail-default square-corners">
		<div class="spb-asset-content"><figure class="animated-overlay overlay-style caption-hover clearfix" >
		<div class="img-wrap"><img width="755" height="1000" src="https://schapenvachtkopen.nl/wp-content/uploads/2020/12/gekleurde_schapenvacht.jpg" class="attachment-full size-full" alt="gekleurde schapenvacht" loading="lazy" /></div><div class="figcaption-wrap"></div><figcaption><div class="thumb-info">
<p><a href="https://schapenvachtkopen.nl/product-categorie/schapenvacht/?swoof=1&amp;pa_kleur=gekleurd&amp;really_curr_tax=72-product_cat">Shop alle gekleurde schapenvachten</a></p>
</div></figcaption></figure>
		</div>
	</div> </section>
 <section  class="row ">
	<div class="spb_content_element col-sm-12 spb_text_column">
		<div class="spb-asset-content" style="margin-top: 0px;margin-bottom: 0px;">
			
<p><a href="https://schapenvachtkopen.nl/product-categorie/schapenvacht/?swoof=1&amp;pa_kleur=gekleurd&amp;really_curr_tax=72-product_cat">Shop alle gekleurde schapenvachten</a></p>

		</div>
	</div> </section>
 
		</div>
	</div> </section>
                 </div>
                
                
            </div><!-- .spb-row -->

            </section>

[PaulOB]

At a guess and from the screenshot it looks as though your floats are snagging because the text content has run to 3 lines on some items.

If indeed they are floated elements then you either need to ensure the items are all a fixed height or they will snag when wrapping or revert to a flexbox design and avoid the issue with floats altogether.

Sorry but I don’t do wordpress or woocommerce but the issue will be a css issue.

If you are using bootstrap3 then look down at the section that says ‘Responsive column resets’ where you have to insert empty divs that clear rows appropriately.

CSS · Bootstrap

Very fiddly and much easier with flexbox.