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!
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024