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
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.