How can I limit the maximum width in the Highlight Theme?

Store Design
1

Screen Shot 2022-08-12 at 9.38.54 PM.png
Screen Shot 2022-08-12 at 9.38.54 PM.png1620×1304 239 KB

Screen Shot 2022-08-12 at 9.39.01 PM.png
Screen Shot 2022-08-12 at 9.39.01 PM.png2560×1302 290 KB

Hi Shopify Community,

I’m looking to limit the width of my entire store so that it stops stretching when a certain width is hit. Whenever I make the website extend from edge to edge of the screen (photo 2), the products are hidden and everything feels too spaced apart. I’d like it to look more like photo 1 whenever it goes past that width.

I’m using the latest version of Highlight.

Thanks,

Lawrence

1 Like
2

@thelqh

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

3

Hi,

To limit the maximum width, please add the code below to assets/theme.css file.

main#main,
.page-content {
  max-width: 1550px !important;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  align-content: center;
}

You may change the max-width number from 1550px to other numbers to fit your needs.

However, the theme won’t display correctly if you make the max-width smaller than 1550px.

If you resolve the issue, please click “Like” and “Accept solution”.

If you still have the issues or have any questions, please let me know.

Hope it helps.

Thanks.

1 Like
4

Thank you so much for your help. So far, it seems to have worked.

I’m assuming it would be more difficult to go in and also set the maximum resize/scaling for the page as well? Once I stretch it out to full screen-widths, it starts behaving strangely again.

Screen Shot 2022-08-13 at 5.43.14 PM.png
Screen Shot 2022-08-13 at 5.43.14 PM.png2560×1303 223 KB

Screen Shot 2022-08-13 at 5.43.24 PM.png
Screen Shot 2022-08-13 at 5.43.24 PM.png313×177 21.2 KB

5

If you want to make max-width by screen size, you may use the code below.

@media screen and (max-width: 749px) {
  main#main,
  .page-content {
    max-width: 100% !important;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    align-content: center;
  }
}
@media screen and (min-width: 750px) and (max-width: 1920px) {
  main#main,
  .page-content {
    max-width: 1550px !important;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    align-content: center;
  }
}
@media screen and (min-width: 1921px) {
  main#main,
  .page-content {
    max-width: 1800px !important;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    align-content: center;
  }
}

The first screen set is for mobile, the second set is for screen width 750px - 1920px, and the third set is for bigger than 1920px screen width.

You may adjust the width limit to fit your needs.

Hope it helps.

Thanks.