Liquid, JavaScript, themes, sales channels
Hello, does anyone know how to make the first section a bit larger (less margin) and the second one full width - meaning the background color takes the full width?
They are both custom HTML sections with these codes:
Section 1 (with the 3 images - which is actually one big image)
<style>
.responsive {
width: 100%;
height: auto;
}
</style>
<img src="https://cdn.shopify.com/s/files/1/0501/5378/3466/files/section_mini_photos3.png?v=1607712738" alt="Nature" class="responsive">
Section 2
<div style="text-align:center; background-color: #fbf4a6;padding-bottom: 50px;padding-top: 40px;">
<h2 style="margin-bottom: 25px; color:#373737">How to Use Spooper</h2>You're still not sure how it works? Don't worry!<br> <b>Check our guide on how to use Spooper by clicking </b> <a href="https://thespooperstore.com/pages/how-it-works">HERE</a>.<br>You will be a PRO in less than a minute!
</div>
Thank you in advance!!
Please place this code at the end of theme.scss
@media only screen and (min-width: 768px) {
#shopify-section-1607599646408c733a .wrapper {
width: 100%;
max-width: 100%;
padding: 0px;
}
#shopify-section-1607597762b6c0a0a8 .wrapper {
width: 96%;
max-width: 96%;
padding: 0px;
}
}
Replace my code with this
#shopify-section-1607599646408c733a .wrapper {
width: 100%;
max-width: 100%;
padding: 0px;
}
#shopify-section-1607597762b6c0a0a8 .wrapper {
width: 96%;
max-width: 96%;
padding: 0px;
}
Better @Hardik29418 ! But how can we apply it only to the yellow background color, so that the text isn't that close to the margin?
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024