Jump to content

Header content padding and max width on mobile and when resizing window

Go to solution Solved by Web_Solutions,

Recommended Posts

Hello, I'm trying to make my header on my site, in line with the rest of the content on my pages. 

I have set max margins to 1200px, which seemed to work on desktop mode, but as soon as you crop the browser window to a certain point the header content (site logo and menu links) seem to extend past the content on the page, displaying edge to edge on mobile.

 

Code I have already added in custom css include: 

#header {
    max-width: 1200px;
    margin: auto;
}

Ideally, I would like this to work throughout the whole site, where content does not stretch out and remains at the widest point here. Where the blank white borders close in on the content when resizing a window (negative space beyond red lines indicated).

 

Thanks

 

Screenshot 2023-11-06 at 5.22.30 pm.png

Screenshot 2023-11-06 at 5.22.41 pm.png

Screenshot 2023-11-06 at 5.22.46 pm.png

Link to comment
  • Replies 6
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

2 hours ago, captainkirk said:

Hello, I'm trying to make my header on my site, in line with the rest of the content on my pages. 

I have set max margins to 1200px, which seemed to work on desktop mode, but as soon as you crop the browser window to a certain point the header content (site logo and menu links) seem to extend past the content on the page, displaying edge to edge on mobile.

 

Code I have already added in custom css include: 

#header {
    max-width: 1200px;
    margin: auto;
}

Ideally, I would like this to work throughout the whole site, where content does not stretch out and remains at the widest point here. Where the blank white borders close in on the content when resizing a window (negative space beyond red lines indicated).

 

Thanks

 

Screenshot 2023-11-06 at 5.22.30 pm.png

Screenshot 2023-11-06 at 5.22.41 pm.png

Screenshot 2023-11-06 at 5.22.46 pm.png

Can you share your website URL?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
  • Solution
18 minutes ago, captainkirk said:

www.designedbykirk.com

Here is the code for mobile. 

@media only screen and (max-width: 767px) {
    .header .header-announcement-bar-wrapper {
        padding-left: 5.5vw !important;
        padding-right: 5.5vw !important;
    }
}

 

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
12 hours ago, captainkirk said:

Worked nicely! Thankyou! Would you also know how to do it for other sections including the simple gallery for instance on mobile? 

 

www.designedbykirk.com/portfolio

 

Cheers! 

Screenshot 2023-11-07 at 2.54.20 pm.png

I think you have did it.

Screenshot_352.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment

Yes, all figured out, thanks for your assistance

 

/* Gallery Section Top and Bottom Padding */
.gallery-grid[data-width="inset"] {
  padding-top: 3vw;
  padding-bottom: 1.5vw;
}

/* Gallery Section Left and Rid Padding Mobile Effect */

.gallery-grid[data-width="inset"] {
  padding-right: 6vw;
  padding-left: 6vw;
}

 

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.