Website Side Margins

[Alphademic]

Hello,

In certain browsers like Firefox, my website is being smushed into a shorter width, with huge white bars on the left and right, and my menu bar goes off the page. However, it seems to display fine in other browsers. Is there a way to fix this? 

Also another question, is there a way to shorten the margins on certain pages of my site so that they're not over an inch wide?

Thanks 

[PaulMathews · Accepted solution]

@Alphademic Well, that is pretty interesting. It appears that the "grid" type display has been employed on the body of your site pages and this is causing an issue with only Firefox (appears to be ignored by Chrome and Edge). Try this:

1. Go to the Code Editor: In the Site Editor, click Theme then click the Edit HTML/CSS button at the bottom of the left-hand sidebar.
2. You should by default be in the site css pane. Search for "html, body" (click the magnifying glass icon at the top of the code pane, enter the search term, and hit your enter key).
3. Comment out the "display:grid" attribute (by placing it inside /* and */ comment indicators), hit the Save button in the upper-right corner of the page, and republish the site. Then check it on Firefox.

html, body { 
/* display: grid; */
height: 100%; 
place-items: center; 
text-align: center; 
}

[NJRFTF]

@Alphademic 

URL of pages where you have those issues?

[Alphademic]

The website url is alphademic.org. 

Thanks

[PaulMathews · Accepted solution]

@Alphademic Well, that is pretty interesting. It appears that the "grid" type display has been employed on the body of your site pages and this is causing an issue with only Firefox (appears to be ignored by Chrome and Edge). Try this:

1. Go to the Code Editor: In the Site Editor, click Theme then click the Edit HTML/CSS button at the bottom of the left-hand sidebar.
2. You should by default be in the site css pane. Search for "html, body" (click the magnifying glass icon at the top of the code pane, enter the search term, and hit your enter key).
3. Comment out the "display:grid" attribute (by placing it inside /* and */ comment indicators), hit the Save button in the upper-right corner of the page, and republish the site. Then check it on Firefox.

html, body { 
/* display: grid; */
height: 100%; 
place-items: center; 
text-align: center; 
}

[Alphademic]

Thank you! This worked and was really helpful. Is there any way to shrink the normal margins for certain pages?

[PaulMathews · Accepted solution]

@Alphademic Typically, the content width within each section is specified in the "container" class in the css. There may be both a maximum width and padding applied and you can modify both of these as desired. In your particular case, the container class css looks like this (follow my previous instructions to get to the css):

.container {
    position: relative;
    margin: 0 auto;
    max-width: 960px;
    padding: 1.5em 0;
    box-sizing: border-box;
}

The max-width is set to 960px which is a bit constrained in light of modern screen resolutions. I'd think about increasing that to around 1100 - 1200px. The padding looks fine since only top/bottom padding is applied (no left/right padding so the only thing affecting the content width is in fact the max-width attribute).

[Alphademic]

Thank you so much for your help!

[Jnord]

Hello everyone,

I tried to start a new thread but have not had any response.  Since it looks like you guys may be able to help me out here I am. 

I have multiple Embed Code Boxes on one page.  The spacing is large between them  Larger on PC then Ipad but still large.  Is the a way to shorten side margins on the Embed containers?  Starting Left to Right.  I am attmepting a Dashboard Look with Data Pages.

Thank you,

Jeff