Here is what it looks like on desktop version of the website : Text | Image Image | Text Text | Image Image | Text Now when I switch to mobile version, the columns in each row, stack on top of each other. Here is what it looks like on mobile version of the website : Text Image Image Text …

Hi @Acid2Rain ! Check the preview below to see if this is what you needed: https://kbqh83zirw5eaalz-56635392157.shopifypreview.com Cheers!

Hi @Acid2Rain Your issue is clear here, we are currently checking for a solution to that issue using the least complex approach. How knowledgeable are you in CSS/HTML? Let me know!

@JHKCreate Thank you for your quick response! I’m not very good with css/html. I know how to copy/paste code into different sections, I also know how to get the section ID’s. I know, it’s not much :grinning_face_with_smiling_eyes:

That’s a start! :wink: Let’s see what can be done and share the code to copy/paste. Alternatively, we would maybe need to request Collaborator access to get this custom coded in. Will let you on the outcome asap! Cheers !

@JHKCreate You’re awesome!!! Thank you for helping out!!

Hi @Acid2Rain ! Let’s try the CSS below: @media only screen and (max-width: 450px) { .image-with-text.image-with-text-1:nth-of-type(odd) .container { display: -webkit-box; display: -ms-flexbox; display: flex; background-color: red; -webkit-box-orient: vertical; -webkit-bo…

@JHKCreate Does it go at the bottom of styles.css.liquid? Because I tried putting it there and it’s not working

Hi @Acid2Rain ! Can you try adding it to the bottom of styles.css? Cheers!

@JHKCreate Unfortunately it doesn’t work when I paste it at the bottom of styles.css. I even removed the 60-Day guarantee

Hi @Acid2Rain ! Do you mind if we requested Collaborator access to implement it? Cheers!

Change Layout for Phone - Alternating Blocks

Store Design

Acid2Rain November 24, 2021, 8:51pm 11

@JHKCreate Yeah, let’s do it

Topic		Replies	Views
Create different page layouts for mobile and desktop Store Design	2	45	October 15, 2022
How can I change my mobile page layout to alternate image and text? Store Design css	1	48	January 4, 2023
Create different page layouts for mobile and desktop (Archetype theme) Store Design	3	46	October 14, 2022
Change the order of image with text only on MOBILE \|\| Symmetry Theme Store Design css	2	68	April 30, 2024
Reverse column of image with text section on mobile Store Design	5	210	January 26, 2023

Change Layout for Phone - Alternating Blocks

Related topics