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.

Edited by BCHQ
Link to comment

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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.

Edited by BCHQ
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;
}

Edited by BCHQ
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.