Jump to content

Site Alignment: left or right look terrible on 4k

Recommended Posts

Site URL: https://studioloys.com/works

Hello everyone,

I'd like to have "Site Alignment: Right" - because of the way my logo and navigation are positioned with that setting - and it looks great on an HD monitor but it looks terrible on 4K. Basically the whole page is squeezed to the right half of the screen, leaving the other half completely blank.

The template I am using - Wexley - has a max page width of 1800, so all the 1800px are pushed to the right of the screen.
Is there a way, some line of code for the "Custom CSS" box, that I could add to fix this?
Can I tell the template to have a "Whole Site Alignment: Central" (at ANY resolution) while keeping the already existing "Site Alignment: Right"?

If there is no solution I will just choose "Site Alignment: Central" but I really don't like having the navigation and my logo at the top-centre of my site.

Any suggestion will be greatly appreciated.

Thanks in advance,

Manuel

 

EDIT: "image 4" is just a photoshopped version I made to show what I would like to have. My site still looks like "image 3" when I choose "Site Alignment: Center" or it looks like "image 2" when I choose "Site Alignment: Right".

image 1.jpg

image 2.jpg

image 3.jpg

image 4.jpg

Edited by Studioloys

Completely lost

Link to comment

to remove page max width, you can add this to Home > Design > Custom CSS

section#page {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
1 hour ago, Studioloys said:

That is actually even better. Thank you!

There is still a bit just under the header that has limited width to 1800px. Is there a way to extend that too? I tried anything but it didn't work.

 

.extra-wrapper .sqs-layout:not(.empty) {
    max-width: 100%;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

AAAHHH! Life saviour, thank you so much, it's perfect!
Man... I have been trying to figure this out myself FOR DAYS (for a week to be precise) by inspecting the page and looking here and there for the right "objects" to edit... trying this and that... reading CSS examples and threads but dude... now that I see what was the actual line... I know I would have never gotten to it on my own, not in a million years.

So, from my heart, thank you so much!

Completely lost

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.