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

0 Likes
HardikDavra
Shopify Partner
2334 368 1003

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;
}
}
PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
SaraK
Excursionist
23 0 3

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

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

0 Likes
SaraK
Excursionist
23 0 3
0 Likes
HardikDavra
Shopify Partner
2334 368 1003

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;
}
PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
SaraK
Excursionist
23 0 3

Better @HardikDavra ! 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

0 Likes