Adjust padding on text block for mobile only

Site URL: https://yampa-icehouse.squarespace.com

Anyone know how to adjust the padding on this block for mobile only?

I've added some CSS but doesn't seem to working. Basically I removed the padding in that section to have my images and scrolling block go to the edges but on mobile the text is unreadable. 

Appreciate any help, thanks.

site: https://yampa-icehouse.squarespace.com

pass: smok

Edit this code

section[data-section-id="62bf411d5f0d75795dcecb37"] .content-wrapper {
    padding: 0 !important;
    max-width: 100vw
}

to this

@media screen and (min-width:992px) {
section[data-section-id="62bf411d5f0d75795dcecb37"] .content-wrapper {
    padding: 0 !important;
    max-width: 100vw
}
}

On 7/2/2022 at 9:07 PM, tuanphan said:

Edit this code

section[data-section-id="62bf411d5f0d75795dcecb37"] .content-wrapper {
    padding: 0 !important;
    max-width: 100vw
}

to this

@media screen and (min-width:992px) {
section[data-section-id="62bf411d5f0d75795dcecb37"] .content-wrapper {
    padding: 0 !important;
    max-width: 100vw
}
}

 

Thanks but I still want to keep the image and scrolling block full width. Any way to adjust that text box and button independently?

16 hours ago, tuanphan said:

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div#page-section-62bf411d5f0d75795dcecb37 .span-6:last-child {
    padding-left: 6vw;
    padding-right: 6vw;
}
}

 

Perfect, thank you!!