I have added some “image with text” sections on my homepage and the lateral margin is too much when comparing the other sections I’ve added. How can I shorten the margin?
I would like the text to be in line with the image (See image attached).
Topic summary
A user is experiencing excessive lateral margins in “Image with Text” sections on their Shopify homepage using the Refresh theme, making the text not align properly with the images.
Problem:
- The lateral margins are too wide compared to other homepage sections
- Text doesn’t align with the image as desired
Solution provided:
A CSS code snippet was shared to add to the assets/base.css file that adjusts padding for the .image-with-text class, specifically targeting mobile screens (max-width: 749px). The code reduces top and bottom padding to 10px.
Outcome:
- The solution was successfully implemented
- Issue appears resolved, with the original poster expressing satisfaction
When compared to the other sections I’ve added to my homepage, the lateral margin is too large for some of the “image with text” sections. What can I do to reduce the margin?
I’ve sent you a DM
Please add the following CSS code to your assets/base.css bottom of the file.
@media screen and (max-width: 749px) {
.image-with-text__content {padding: 1rem calc(1rem / var(--font-body-scale)) 0rem !important;}
.image-with-text.isolate {padding-top: 10px !important; padding-bottom: 10px !important;}
}
Thanks!
Excellent thanks a lot 