Change Layout for Phone - Alternating Blocks

Solved
Acid2Rain
Explorer
50 0 17

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)

Accepted Solutions
JHKCreate
Shopify Partner
2920 504 723

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


| Satisfied with our solutions? Drop a review on Google

View solution in original post

JHKCreate
Shopify Partner
2920 504 723

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


| Satisfied with our solutions? Drop a review on Google

View solution in original post

Replies 17 (17)
JHKCreate
Shopify Partner
2920 504 723

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


| Satisfied with our solutions? Drop a review on Google

Acid2Rain
Explorer
50 0 17

@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
2920 504 723

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


| Satisfied with our solutions? Drop a review on Google

Acid2Rain
Explorer
50 0 17

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

JHKCreate
Shopify Partner
2920 504 723

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


| Satisfied with our solutions? Drop a review on Google

Acid2Rain
Explorer
50 0 17

@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
2920 504 723

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


| Satisfied with our solutions? Drop a review on Google

Acid2Rain
Explorer
50 0 17

@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
2920 504 723

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


| Satisfied with our solutions? Drop a review on Google