Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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!
This is an accepted solution.
Hey @Acid2Rain !
No worries, switched it back to how it was before:
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 😄
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 !
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!
@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!
@JHKCreateUnfortunately 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!
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!
@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?
Hi @Acid2Rain !
Sure thing! Here's the link to the preview with the requested modification:
https://kbqh83zirw5eaalz-56635392157.shopifypreview.com
Cheers!
@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
This is an accepted solution.
Hey @Acid2Rain !
No worries, switched it back to how it was before:
https://kbqh83zirw5eaalz-56635392157.shopifypreview.com
Cheers!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024