BCHQ Posted November 5, 2020 Share Posted November 5, 2020 (edited) 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 November 5, 2020 by BCHQ Link to comment
Beyondspace Posted November 5, 2020 Share Posted November 5, 2020 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; } 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 HighlighterIf 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
BCHQ Posted November 5, 2020 Author Share Posted November 5, 2020 (edited) 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 November 5, 2020 by BCHQ Beyondspace 1 Link to comment
BCHQ Posted November 15, 2020 Author Share Posted November 15, 2020 (edited) 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 November 15, 2020 by BCHQ Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment