Hi.
I am using the dawn theme Image with Text section feature. I have content container overlap selected and a different container colour to my main page.
I have noticed on the mobile device the text doesn’t go wide enough across to near the edges of the container, how can I change how far the text goes to the edge of the container please, to move it closer and make it look better? It looks fine on the laptop but not on mobile devices.
Thank in advance
Emma
Hi Emma! It sounds like you’re looking to adjust the text width for the “Image with Text” section in the Dawn theme on mobile devices. You can achieve this by tweaking the CSS for that section. Here’s how you can do it:
Access the Theme Editor:
From your Shopify admin, go to Online Store > Themes.
Click on Actions > Edit Code for the Dawn theme.
Locate the CSS File:
In the left-hand panel, find the Assets folder and open the base.css or theme.css file (depending on your theme version).
Add Custom CSS:
Scroll to the bottom of the file and add the following code:
@media screen and (max-width: 768px) {
.image-with-text__content {
padding-left: 10px !important;
padding-right: 10px !important;
}
}
This code reduces the padding on mobile devices, allowing the text to extend closer to the edges of the container.
Save and Preview:
Save your changes and preview your store on a mobile device to ensure the text looks better.