Change Layout for Phone - Alternating Blocks

Navigator
1151 0 118

Hello! Hoping one of you has the answer I need. Thanks in advance.

On a desktop/tablet, my theme shows detailed info in this layout:

IMAGE | TEXT

TEXT | IMAGE

IMAGE | TEXT

Content is created by looping through images with a certain file name aspect, using the Alt text to the Alt text and viewable copy (I just SPLIT it). My liquid code keeps track of odd/even images and either shows the text block before or after the image. Works great - on a desktop and table.

On a mobile phone, the result is

IMAGE

TEXT

TEXT

IMAGE

IMAGE

TEXT

What I want is:

IMAGE

TEXT

IMAGE

TEXT

IMAGE

TEXT

Now I understand that liquid is not able to detect screen size. And I know you can hide things via CSS via code like

@media (max-width:767px){
.product_gallery_nav {
    display: none;
}
}

Any suggestions on how to do this elegantly? I suppose I could duplicate the looping code and wrap each in a container that would hide each the result of each copy of the code but that would waste CPU time.

Thanks!

Alan

http://www.StandoutDesigns.com ::: Solid Wood TV Furniture for Enthusiasts. Made in USA.
0 Likes
Highlighted
Navigator
1151 0 118

Here is the solution I will look at implementing:

https://webflow.com/website/alternating-content?s=alternating-content

From this discussion:

https://forum.webflow.com/t/how-to-make-responsive-alternating-content-layout-stack-on-top-of-each-o...

 

http://www.StandoutDesigns.com ::: Solid Wood TV Furniture for Enthusiasts. Made in USA.
0 Likes
Shopify Partner
3 0 0

Thanks for posting that. Any idea how to implement that fix on a Shopify site? I'm having this issue as well. The webflow example works perfectly but I'm having a hard time finding the code.

0 Likes