A user sought help removing excessive padding around text in an image-with-text block on their Shopify store using the Studio theme. Previous CSS attempts had failed to resolve the spacing issue on both mobile and desktop views.
Solution provided:
@media screen and (min-width: 990px) {
.image-with-text__content {
padding: 0rem !important;
}
}
.image-with-text__content {
padding: 0rem !important;
}
Outcome: The CSS code successfully eliminated the unwanted padding across all screen sizes. The issue is resolved.
Hello,
I have tried several suggestions to reduce the padding around my text in an image with text to no avail. I’m attaching a screenshot of the problem. I wish I could simply stretch the text box to fit the space. I would love some help, please.
One of the unsuccessful attempts was adding this to the section of the theme.liquid file:
.page-width {
max-width: 100% !important;
}
@media (max-width: 767px) {
.image-with-text__text-item.grid__item {
margin-top: -100px;
}
}
Thanks -
Hi @LisaWommack
Do you like to reduce in the mobile screen only? Would you mind to share your Store URL website? with password if its unpublish. Thanks!
Hello,
I’d like the padding to be removed from the mobile and desktop view. My url is www.lisawommackfineart.com.
Thanks,
Lisa
Thanks for the info, 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 screen and (min-width: 990px){
.image-with-text__content {
padding: 0rem !important;
}
}
.image-with-text__content {
padding: 0rem !important;
}
And Save.
Result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
That worked perfectly! Thanks so much.
