Jump to content

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

Recommended Posts

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.

Link to comment
  • Replies 3
  • Created
  • Last Reply

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

image.thumb.png.49a08f32be54dfa03041b7ac7059d513.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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.

Link to comment
  • 2 weeks later...

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

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.