Change Content Container Padding/Margin for Image with Text Overlay Section

Store Design
, , , ,
1

I am currently building a website using a custom theme (Prestige) and need help with the custom CSS for minor edits. Since I don’t want these needed edits to apply to all “image with text overlay” sections, I want to use custom CSS specifically to achieve this.

The image below is what the section that I need changed looks like currently. I would like to change the padding/margins of a “image with text overlay” section to lengthen the width of the (invisible) text box in desktop view. I don’t need to change anything for mobile.

Screenshot 2024-03-08 at 4.40.21 PM.png
Screenshot 2024-03-08 at 4.40.21 PM.png2868×1226 382 KB

This is how I would roughly like it to look (in terms of the content container size):

OUR MISSION.png
OUR MISSION.png2048×873 304 KB

The website URL is https://790869-a3.myshopify.com/ - The password is “teyawr” if needed.

If anyone can help me out it’d be greatly appreciated!

2

Hi @d2arealty ,

Simply follow these steps:

Navigate to Online Store → Theme → Edit code.
Search for the file “base.css.”
Paste the provided code at the bottom of the file.
Save your changes.

.SectionHeader__Description {
    max-width: 697px !important;
}

.ImageHero__ContentOverlay {
    position: relative;
    flex-basis: 0px !important; 
    flex-grow: 0;
    padding: 0 15px;
    text-shadow: 0 1px rgba(0,0,0,.5);
}

Thank you

3

The theme I’m using doesn’t have a base.css file. Where should I put it instead?