Change Layout for Phone - Alternating Blocks

[Acid2Rain]

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
Text
Image
Image
Text
However, I want to achieve the following look on mobile :
Text
Image
Text
Image
Text
Image
Text
Image

How do I do this ?

Website: www.ecogarby.com

Pass: sss

[JHKCreate · Accepted solution]

Hi @Acid2Rain !

Check the preview below to see if this is what you needed:

https://kbqh83zirw5eaalz-56635392157.shopifypreview.com

Cheers!

[JHKCreate]

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!

[Acid2Rain]

@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 😄

[JHKCreate]

That's a start! 😉

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 !

[Acid2Rain]

@JHKCreateYou're awesome!!! Thank you for helping out!!

[JHKCreate]

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-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
  }
}

This works fine if we were to move the "60 Days Money Back" div to the bottom. If moving it down is not an option, we can look into a more customized solution.

Cheers!

[Acid2Rain]

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

[JHKCreate]

Hi @Acid2Rain !

Can you try adding it to the bottom of styles.css?

Cheers!

[Acid2Rain]

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

[JHKCreate]

Hi @Acid2Rain !

Do you mind if we requested Collaborator access to implement it?

Cheers!

[Acid2Rain]

@JHKCreateYeah, let's do it

[JHKCreate · Accepted solution]

Hi @Acid2Rain !

Check the preview below to see if this is what you needed:

https://kbqh83zirw5eaalz-56635392157.shopifypreview.com

Cheers!

[Acid2Rain]

@JHKCreate that is so awesome!!!! That is exactly what I'm looking for!!! 

[Acid2Rain]

@JHKCreate I feel like I'm asking for way too much, but is there anyway the picture comes first on top of perfect for Outdoor/Indoor Use? 

[JHKCreate]

Hi @Acid2Rain !

Sure thing! Here's the link to the preview with the requested modification:

https://kbqh83zirw5eaalz-56635392157.shopifypreview.com

Cheers!

[Acid2Rain]

@JHKCreate I think the way you had it at the beginning look much better. I don't want to annoy you any more 😊 how would I go about switching it back to what you had before? I can do it, you've done enough for me

[JHKCreate · Accepted solution]

Hey @Acid2Rain !

No worries, switched it back to how it was before:

https://kbqh83zirw5eaalz-56635392157.shopifypreview.com

Cheers!

[Acid2Rain]

Can't thank you enough!!! @JHKCreate