Jump to content

Mobile Content Section Padding Brine 7.0

Go to solution Solved by afs242,

Recommended Posts

Using Brine 7.0
On website the content section section padding is site through site styles and looks fine. 
(Note green arrow on 1st photo)
However on mobile there is a huge white space. 
(Note red arrow on 2nd photo)

Is the css to get rid of that white gap on mobile?
page is found at https://www.raehcollection.com/shop/wana-earring-threader

Screen Shot 2023-11-16 at 1.37.13 PM.png

Screen Shot 2023-11-16 at 1.37.28 PM.png

Edited by afs242
added info
Link to comment
  • Replies 6
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

As I only want the white space gone on mobile version I included this with your code-

@media screen and (max-width:640px) {
section.Index-page>.Index-page-content {
    justify-content: flex-start !important;
}
}

Unfortunately that didn't get rid of the extra white space. It doesn't seem to appear on all the pages, just three of them.

https://www.raehcollection.com
https://www.raehcollection.com/find-us
https://www.raehcollection.com/story

Screen Shot 2023-11-21 at 7.19.43 PM.png

Edited by afs242
Link to comment
  • Solution

It seems under Site Styles under Index Navigation I had checked "Apply Minimum Height" to All Pages. By default this sets minimum height to 50vh. I turned "Apply Minimum Height" to None. Under Custom CSS I then reduced top/bottom padding to each of the galleries blocks on each page using this code (see below). This gave me control of the white space on mobile view.

//Header Banner Padding mobile//
@media screen and (max-width:640px) {
#block-yui_3_17_2_1_1700096549547_1930{
    padding-top: 0px !important;
     padding-bottom: 0px !important;
}
}
//end//

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.