Rich Text + Tolstoy app edit

ambientcandle19
Excursionist
50 0 4

Is there a way to make the rich Text different on mobile and desktop.

 

On mobile it's the right size on desktop it's WAAAY too small. It doesn't look proportional is there any code to hide one and show the other. Then vice versa so I can scale accordingly on each. 

 

 

Also is there anyway I could edit the Tolstoy app. It's also too small on the website. Anyway to make it max width

 

 

lastcandles.myshopify.com

 

 

 

 

Replies 5 (5)

laddisahsi
Shopify Partner
382 38 40

Hi @ambientcandle19 

You can follow the following steps:

1. Please remove the width from the html.
2. Please go to the Online Store.
3. Then Edit Code.
4. Please find the theme.liquid file.
5. Please add code before closing the tag </head> tag.

<style>

#shopify-section-template--16879055372467__rich_text_i3xnhh .rich-text__wrapper {
    width: 40% !important;
}
@media only screen and (min-width: 990px) {
#shopify-section-template--16879055372467__rich_text_i3xnhh .rich-text__wrapper {
    width: 100% !important;
}
}

</style>

 

 

If this solution is worked, then please Like this and Mark this as accepted solution!


Laddi

-Shopify website development, Theme & App Development
-Contact me: WhatsApp


-Email Me
-If this solution is worked, then please Like this and Mark this as accepted solution!
ambientcandle19
Excursionist
50 0 4

The rich Text and the Tolstoy are two different questions.

 

For the rich text_ on the craft theme 13. I am wondering how I can display a different rich Text on mobile and desktop. Beuse it looks good on mobile not ideal on desktop.

 

For Tolstoy can I use that code?? The theme liquid would have the code for w third party app not sure 

PageFly-Noah
Astronaut
1094 198 217

This is Noah from PageFly - Shopify Page Builder App

 

Please  add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

 

 

<style>
   @media screen and (min-width: 900px){
    .rich-text__heading{
       font-size: 30px !important ; // you can change size fit
    }
    .rich-text__text p{
       font-size: 18px !important ; // you can change size fit
    }
    .rich-text__blocks {
        max-width: 1140px !important;  //you can change other params
    }
}


</style>

 

 

Hope my solution will help you resolve the issue.

 

Best regards,

Noah | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

ambientcandle19
Excursionist
50 0 4

It didn't work and it knocked out a code that I have previously that allows me to have two different images on desktop and mobile ... I am currently changing the desktop image anyways but after I put that code both start showing again so idk maybe just delete them idk. I know you guys answer so maybe questions so idk 

PageFly-Noah
Astronaut
1094 198 217

 Iam sorry about that , I  will check again.

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.