Rich text with image prestige theme

[themuseclub]

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!!!

[LitExtension · Accepted solution]

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!

[LitExtension]

Hi @themuseclub, 

Do you want to show like this screenshot: https://prnt.sc/11aufy4?

- If that's your idea. Please place this code at the end of the "theme.scss" file.

@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! 

[themuseclub]

Hey @LitExtension ,

thanks for your help!!! But It didn't work, did I do anything wrong?

Thank you!!

[LitExtension · Accepted solution]

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!

[themuseclub]

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!!!

[LitExtension · Accepted solution]

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! 

[TribeFitCollec]

Hi @LitExtension 

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!

[jaylan_tahtali]

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