Full width sections in the Hompage - Brooklyn theme

SaraK
Excursionist
23 0 3

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?

gerfefs.JPG

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!!

www.thespooperstore.com

Replies 5 (5)

Hardik29418
Shopify Partner
2858 407 1073

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;
}
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
SaraK
Excursionist
23 0 3

Thank you @Hardik29418 , it worked for desktop view, but not for mobile 😞

photo_2020-12-12_10-23-23.jpg

SaraK
Excursionist
23 0 3
Hardik29418
Shopify Partner
2858 407 1073

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;
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
SaraK
Excursionist
23 0 3

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? 

photo_2020-12-12_11-47-48.jpg