Inspiro light, setting max width of the site to 960px?

[Lufsen11]

Hello

Is there anybody who can give me advice on how to set up a max width of 960px to Inspiro -Lite?
I need this for a the presentation on large screens without effecting the smaller mobile screen.
I would like it to give an impression ofA4 or letter size when viewed on large screens,

Anybody? It would make my day to get some help with this.

[ciorici]

Hello @Lufsen11

This is a difficult request, because we need to see what elements you have on your website.

Normally, you should just resize the browser window to the needed size of 960px, and the theme will adapt just fine, as it's a responsive theme.

A quick solution would be to add this CSS code in the Customizer > Additional CSS:

body {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

However, it might not help if you have full-width sections created with the block editor or Elementor.

Another solution would be to add this code too:

body * {
    max-width: 960px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

[Lufsen11]

Thank you I did the body, but I still have one container sticking out on the sides 1.the hero image and 2. The image bg above the footer. And I´m note skilled enough to figure this one out. Thank you Oh so much for trying to help me solve this :-) Berit Lindeberg-Åre Sweden

…

13 jan. 2024 kl. 10:25 skrev Pavel Ciorici ***@***.***>: Hello @Lufsen11 <https://github.com/Lufsen11> This is a difficult request, because we need to see what elements you have on your website. Normally, you should just resize the browser window to the needed size of 960px, and the theme will adapt just fine, as it's a responsive theme. A quick solution would be to add this CSS code in the Customizer > Additional CSS: body { max-width: 960px; margin-left: auto; margin-right: auto; } However, it might not help if you have full-width sections created with the block editor or Elementor. Another solution would be to add this code too: body * { max-width: 960px !important; margin-left: auto !important; margin-right: auto !important; } — Reply to this email directly, view it on GitHub <#14 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A3N6WA5BVYA5SKEEYFFZ5KLYOJHIZAVCNFSM6AAAAABBYQA7FSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DCMJWG42DA>. You are receiving this because you were mentioned.

[Lufsen11]

And Oh I forgot, this is the page dev.avesaltus.se

…

13 jan. 2024 kl. 10:25 skrev Pavel Ciorici ***@***.***>: Hello @Lufsen11 <https://github.com/Lufsen11> This is a difficult request, because we need to see what elements you have on your website. Normally, you should just resize the browser window to the needed size of 960px, and the theme will adapt just fine, as it's a responsive theme. A quick solution would be to add this CSS code in the Customizer > Additional CSS: body { max-width: 960px; margin-left: auto; margin-right: auto; } However, it might not help if you have full-width sections created with the block editor or Elementor. Another solution would be to add this code too: body * { max-width: 960px !important; margin-left: auto !important; margin-right: auto !important; } — Reply to this email directly, view it on GitHub <#14 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A3N6WA5BVYA5SKEEYFFZ5KLYOJHIZAVCNFSM6AAAAABBYQA7FSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DCMJWG42DA>. You are receiving this because you were mentioned.

[Lufsen11]

Hello again Or at least it was now it is live. https://www.avesaltus.se <https://www.avesaltus.se/> And your code works well, although I still have the problem with the hero image growing out of proportion and off course getting blurry on a big screen. But Thanks a lot :-) Have a lovely day. Berit-Sweden

…

13 jan. 2024 kl. 10:25 skrev Pavel Ciorici ***@***.***>: Hello @Lufsen11 <https://github.com/Lufsen11> This is a difficult request, because we need to see what elements you have on your website. Normally, you should just resize the browser window to the needed size of 960px, and the theme will adapt just fine, as it's a responsive theme. A quick solution would be to add this CSS code in the Customizer > Additional CSS: body { max-width: 960px; margin-left: auto; margin-right: auto; } However, it might not help if you have full-width sections created with the block editor or Elementor. Another solution would be to add this code too: body * { max-width: 960px !important; margin-left: auto !important; margin-right: auto !important; } — Reply to this email directly, view it on GitHub <#14 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/A3N6WA5BVYA5SKEEYFFZ5KLYOJHIZAVCNFSM6AAAAABBYQA7FSVHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4DCMJWG42DA>. You are receiving this because you were mentioned.