How can I setthe Broadcast theme page width?

Store Design
,
1

Hello!

We want to set the collection page not to be full-screen, be center aligned, like here:
https://gossby.com/en-us/collection/personalized-gifts-for-best-friends?sref=265&utm_source_hp=hp_popularcollection
Any tip?

2

Hey @Fussigabor

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hello!

https://bogrebarat.hu/
Pass: pialyu

4

Hey @Fussigabor

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1723809366335.png
Moeed_0-1723809366335.png1875×858 143 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

5

Hello @Fussigabor
Go to online store ---------> themes --------------> actions ------> edit code------->theme.css
add this code at the very end of the file

section#Collection--template--23185041129811__main {
margin-left: auto;
margin-right: auto;
width: 1700px;
}

result

19.png
19.png1920×846 195 KB

If this was helpful, hit the like button and accept the solution.
Thanks

6
  • Here is the solution for you @Fussigabor
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media only screen and (min-width: 1100px) {
.collection__products .grid-outer {
    padding-left: 10% !important;
    padding-right: 10% !important;
}
}
  • Here is the result you will achieve:

BSSTekLabs_0-1723809706725.png
BSSTekLabs_0-1723809706725.png1903×902 216 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
7

Could you please send a code for product page and one more code to full/global website?

Thank you!

8

Hey @Fussigabor

Remove the previous code and add this updated code.

RESULT:

Moeed_0-1723810469326.png
Moeed_0-1723810469326.png1890×869 199 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

9

unfortunately it’s not good because it will take 200-200px off even on a small monitor, so please make the content 1100px wide, but if your monitor is smaller than 1100 then reduce it

10

Hello! :slightly_smiling_face:

Could you please send a code for product page and one more code to full/global website?

We tryed: @media screen and (min-width: 768px) { main#MainContent { padding-left: 200px !important; padding-right: 200px !important; } }
But unfortunately it’s not good because it will take 200-200px off even on a small monitor, so please make the content 1100px wide, but if your monitor is smaller than 1100 then reduce it

11

Hello! :slightly_smiling_face:

Could you please send a code for product page and one more code to full/global website?

We tryed: @media screen and (min-width: 768px) { main#MainContent { padding-left: 200px !important; padding-right: 200px !important; } }
But unfortunately it’s not good because it will take 200-200px off even on a small monitor, so please make the content 1100px wide, but if your monitor is smaller than 1100 then reduce it