How to define maximum width for content?

Hello
Is there a way to define maximum width for content, especially images. For example 2000px or so? Otherwise it looks kind of lost.
Thanks

1 Like

Hi Phil

The cleanest way to do this would be to add a max-width to the whole content (between header and footer).

If you add this to your CSS this will cap the max width of content to 2000px:

#MainContent {
  max-width: 2000px;
  margin: 0 auto;
}

If you want to also have a border on the sides of the content when it reaches this width - you could also add this CSS:

@media (min-width:2001px){
  #MainContent {
      border-left: var(--border-width) solid var(--color-border);
      border-right: var(--border-width) solid var(--color-border);
  }
}

Just make sure that the value in min-width in the second code snippet is 1px more than your max width - so the border won’t show up until necessary.

Here is an example of how this looks on the Baseline demo store on a large screen:

Hi William, thanks for the prompt reply.
Best, Phil

Hi William,

I tried adding this code block to the very end of theme.css but nothing changed…any idea what could be wrong?

#MainContent {
  max-width: 2000px;
  margin: 0 auto;
}

Hello

It might need to be the theme.min.css file as that is the one that is used by default in the theme. If it still doesn’t work - contact our support team and we will help you out.

Hi William, Nick here,

I’m not a developer, so excuse my ignorance, but is there anywhere specific within the theme.min.css file that I should put this code? I’ve just added it in and saved and not seeing any difference.

Thanks

Hey @nickhardiegrant,

You would paste your code at the bottom of the theme.min.css file.

If this still does not work, please contact our support team and we will help you out.

Hi All,

I am using the ‘SHAPES’ theme and would like to decrease the margin of my website. I see above I need to copy/paste the below text into a ‘.css’ section. What is the exact folder name that I add the code too?

#MainContent {
max-width: 2000px;
margin: 0 auto;
}

Thanks,
Ethan

Hey @ethanhoeft,

We have a detailed guide on where to add CSS code within our Shapes theme. You can check it out below:
Use custom CSS | Switch Themes Help

​Let us know if you have any further questions :slight_smile: