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

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

d2arealty
Visitor
2 0 0

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

 

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

OUR MISSION.png

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!

Replies 2 (2)

thirtycoders
Shopify Partner
135 21 28

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

Thirtycoders || Shopify Partner
Found my response useful? Show your appreciation with a Like!
Did your query get resolved? Mark it as an Accepted Solution.
For additional discussions, reach out via: Email ID: thirtycoders@gmail.com
d2arealty
Visitor
2 0 0

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