Full-width images on Desktop AND Mobile View (Height = responsive)

Site URL: https://bubblegumchique.com/

Hello,

I am building a Squarespace 7.1 website. I want to be able to create full-width image banners like those found on kyliecosmetics.com.

How can I do this?

I need the images to be full width (100% device/browser window width, NO CROPPING, no margins, no padding)

I've tried background images, full-bleed slideshows, full-width slideshows, and image blocks placed in sections. The image always winds up too small, or too big and gets cropped on the top/bottom/sides. My image is 1902x823 pixels, which falls within Squarespace's recommendations of 1500-2500 pixels wide, and also matches the size of the images used on kyliecosmetics.com.

Any help you experts can provide will be greatly appreciated. I am at my wit's end fighting with this.

P.S. For mobile view, I plan to use 823x823 images, and make them only visible on mobile view. The 1902x823 images  mentioned above will similarly only be viewed on desktop.

For this specific section, you can use this custom css

section[data-section-id="5fa1e3cce68b311702162b34"].page-section.horizontal-alignment--center > .content-wrapper {
  padding: 0 !important;
  max-width: inherit !important;
}

15 minutes ago, bangank36 said:

For this specific section, you can use this custom css

section[data-section-id="5fa1e3cce68b311702162b34"].page-section.horizontal-alignment--center > .content-wrapper {
  padding: 0 !important;
  max-width: inherit !important;
}

 

EDIT: Got it working after pasting it in Custom CSS.

If I want to add additional pictures, do I need to add more code to call out specific sections? I have the ID Finder plugin for Chrome.

I have successfully managed to add the appropriate CSS to make various images across the website full width. I tried using the same code to make a full-width gallery slider, but the code is not having the same effect. Can you help me to troubleshoot this?

Page with slider:

https://bubblegumchique.com/faqs

ID for slider block:

section[data-section-id="5fb06f9590715276662385d7"]

Thank you again for your help.

P.S. Below is the code I added to my CSS:

//FAQs (Slider))//
section[data-section-id="5fb06f9590715276662385d7"].page-section.horizontal-alignment--center > .content-wrapper {
padding: 0 !important;
max-width: inherit !important;
}