Re: Symmetry theme MOBILE: how to change text-picture order without changing it in the desktop versi
Could anybody help me with the following:
I have three image-text blocks in my desktop version like this:
On my mobile view this reverse order causes that two pictures are following to each other and it seems very confusing with the header and text order:
Is it possible to change the order of the text - picture allignment/order ONLY for the mobile version?
Thank you very much for help!
Hey @Delasoul,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
@media only screen and (max-width: 989px) {
div#section-id-template--20779550966098__custom_row_qt6Cbw > div {
flex-direction: column-reverse;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
@ThePrimeWeb thank you very much, it worked.
But do you know how I can get space between the picture and my subheader and also less space below the grey button? Right now it looks like this:
Hi @ThePrimeWeb ,
sorry to bother you again but I have a problem again with my spacing on the mobile screen. Any chance you could help me out one last time? After the second picture there is too much space now:
.... while the extra space is now missing here:
Thank you so much for help!
Hey @Delasoul,
Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.
<style>
@media only screen and (max-width: 989px) {
div#section-id-template--20779550966098__custom_row_qt6Cbw {
margin-top: 0px !important;
}
div#section-id-template--20779550966098__custom_row_kdtj6y {
margin-bottom: 10px;
}
#section-id-template--20779550966098__custom_row_qt6Cbw .subheading.subheading--over {
margin-top: 10px !important;
}
div#section-id-template--20779550966098__custom_row_qt6Cbw .rimage-background-wrapper {
margin-top: 30px !important;
}
div#section-id-template--20779550966098__custom_row_qt6Cbw {
margin-bottom: 20px !important;
}
}
</style>
Screenshot is for reference only, the correct code to paste is the one shown above.
thanks @ThePrimeWeb that worked with the spaces. Now the picture order is still wrong, for the very first part it works (first picture then header then text) but then it changes... How can I change this for the other parts as well?
Community Blog Articles
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024
Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024
In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024