Shopify themes, liquid, logos, and UX
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.
This is how I would roughly like it to look (in terms of the content container size):
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!
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
The theme I'm using doesn't have a base.css file. Where should I put it instead?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025