As I said, I want to reduce the rich text section, only on Mobile, if I have to reduce the font size, It wouldn’t be a problem… Thanks to everybody
This is my store: https://gioto-1308.myshopify.com/
Topic summary
A user needed to reduce the size of a Rich Text section specifically on mobile devices for their Shopify store using the Symmetry theme, with font size reduction being acceptable.
Solution provided:
- Navigate to Shopify admin → Online Store → Themes → Actions → Edit code
- Locate the CSS file (base.css, style.css, or theme.css) in the Assets folder
- Add mobile-specific CSS targeting elements with max-width: 749px media query
- Apply reduced padding (15px) and margins (1rem) to relevant classes
Initial attempt failed when code was added to style.css and theme.js files.
Resolution: After receiving revised CSS code with proper media queries targeting .padded-row and .fully-padded-row--small classes, the solution successfully worked. The issue was resolved with the corrected CSS implementation.
Hi @Mdb_Gioto
Do you mean like this?
If it is check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (max-width: 749px){
.article.use-alt-bg.fully-padded-row--small.cc-animate-init.-in.cc-animate-complete {
padding: 15px;
}
.lightly-spaced-row-above {
margin: 1rem;
}
}
And save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Hi! I tried adding the code in the style.css and theme.js, but it didn’t work… Did I make something wrong?
1 Like
Can you replace on this code.
@media only screen and (max-width: 749px){
.padded-row, .fully-padded-row--small {
padding: 15px !important;
}
.lightly-spaced-row-above {
margin: 1rem;
}
}
And save.
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
Thank you, it worked ! thanks