Hey guys,
I am so confused.
I added a new “rich text with image” section to the about us page. On mobile it shows the picture under the text, and i want to change that!
The weird thing is that one the homepage the same section shows the picture before the text on mobile.
Can you help me?
Here ist the page url: https://xh0ew6uyt8n8j7yn-52719714468.shopifypreview.com/pages/copy-of-behind-the-muse-club
Thank you!!!
Hi @themuseclub ,
Do you want to show like this screenshot: https://prnt.sc/11aufy4?
@media screen and (max-width: 767px)
.FeatureText–withImage {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column-reverse;
}
.FeatureText__ImageWrapper {
width: 100%;
}
}
Screenshot to refer: https://prnt.sc/11ausqh
Hope this helps!
Hey @LitExtension ,
thanks for your help!!! But It didn’t work, did I do anything wrong?
Thank you!!
Hi @themuseclub ,
Sorry for that. I’m missing ‘{’ and ‘}’. Please remove old the snippet and add the new this snippet:
@media screen and (max-width: 767px) {
.FeatureText–withImage {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column-reverse;
}
.FeatureText__ImageWrapper {
width: 100%;
}
}
Hope this helps!
Hi @LitExtension ,
thank you so much, it worked!!!
Could you maybe help me with this point as well?
I want the rich text to have the same margins left and right as the other text, e.g. footer etc.
Link: https://www.the-muse-club.com/pages/test
Thank you so much!!!
Hi @themuseclub ,
You can try 2 ways below:
Way1: Please place this code at the end of the “theme.scss” file:
.template-page #main {
padding: 0 24px;
}
@media (min-width: 768px) {
.template-page #main {
padding: 0 35px;
}
}
@media (min-width: 1140px) {
.template-page #main {
padding: 0 65px;
}
}
Screenshot to refer: https://prnt.sc/11fdwop
Way2: You can use selector has class “Container” to wrap the content of page like this screenshot: https://prnt.sc/11fe8lo
Hope this helps!
Hi @themuseclub @LitExtension ,
Hope you’re both well. I came across this thread.. I was wondering how did you add a rich text with image section or even any sections at all to the about us page?
Mine does not give me the option to add any sections ? I have included an image below.
Thanks for your help,
Jay
I tried your code but i believe it does not work for my page as i alternated the images left - right - left - right as shown in this screenshot, are you able to share a version of the code that will help my images appear before text on mobile view?
Thanks!
