How to define maximum width for content?

Theme discussion Baseline
#1

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
#2

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:

Screen Shot 2022-02-08 at 9.44.12 am
Screen Shot 2022-02-08 at 9.44.12 am1920×974 142 KB

#3

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

#4

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;
}
#5

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.

#6

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

#7

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.