Change Layout for Phone - Alternating Blocks

Solved

Change Layout for Phone - Alternating Blocks

Acid2Rain
Pathfinder
140 0 45

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

Accepted Solutions (2)
JHKCreate
Shopify Partner
3571 638 928

This is an accepted solution.

Hi @Acid2Rain !

 

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

 

https://kbqh83zirw5eaalz-56635392157.shopifypreview.com

 

Cheers!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com

View solution in original post

JHKCreate
Shopify Partner
3571 638 928

This is an accepted solution.

Hey @Acid2Rain !

 

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

 

https://kbqh83zirw5eaalz-56635392157.shopifypreview.com

 

Cheers!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com

View solution in original post

Replies 17 (17)

JHKCreate
Shopify Partner
3571 638 928

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!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Acid2Rain
Pathfinder
140 0 45

@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
Shopify Partner
3571 638 928

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 !

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Acid2Rain
Pathfinder
140 0 45

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

JHKCreate
Shopify Partner
3571 638 928

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!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Acid2Rain
Pathfinder
140 0 45

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

JHKCreate
Shopify Partner
3571 638 928

Hi @Acid2Rain !

 

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

 

Cheers!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Acid2Rain
Pathfinder
140 0 45

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

JHKCreate
Shopify Partner
3571 638 928

Hi @Acid2Rain !

 

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

 

Cheers!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Acid2Rain
Pathfinder
140 0 45

@JHKCreateYeah, let's do it

JHKCreate
Shopify Partner
3571 638 928

This is an accepted solution.

Hi @Acid2Rain !

 

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

 

https://kbqh83zirw5eaalz-56635392157.shopifypreview.com

 

Cheers!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Acid2Rain
Pathfinder
140 0 45

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

Acid2Rain
Pathfinder
140 0 45

@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
Shopify Partner
3571 638 928

Hi @Acid2Rain !

 

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

 

https://kbqh83zirw5eaalz-56635392157.shopifypreview.com

 

Cheers!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Acid2Rain
Pathfinder
140 0 45

@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
Shopify Partner
3571 638 928

This is an accepted solution.

Hey @Acid2Rain !

 

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

 

https://kbqh83zirw5eaalz-56635392157.shopifypreview.com

 

Cheers!

Did we solve your issue? Like & Mark As Solution to help the community
Should you need any direct help: contact@jhkcreate.com

Learn more about us: jhkcreate.com
Acid2Rain
Pathfinder
140 0 45

Can't thank you enough!!! @JHKCreate