Jump to content

Why isn't there an option to globally align/make a gutter for everything?

Recommended Posts

I love the design of Squarespace and the service, BUT I am having some fundamental issues with it. 

I want a very strict and modern look, kinda like tables, where everything is aligned more consistently and things line up. Sort of like https://www.polestar.com/ or https://www.norgram.co/ 

The big problem for me has been the overall gutter/padding of the sites. I tried changing the site margin to 12vw, and that worked until I tried it out on different screen sizes. Now I reset it to default, 4vw and a page width of 1400px. 

It came to point, where for some reason, the blog-sections of the site had different padding than the rest of the website, and I had to insert this code:

/* Desktop blog padding */
@media screen and (min-width:768px) {
.blog-basic-grid.collection-content-wrapper, .tweak-events-stacked-width-inset .events {
    padding-left: 0;
    padding-right: 0;
}
}
@media screen and (min-width:768px) and (max-width:1400px) {
.blog-basic-grid.collection-content-wrapper, .tweak-events-stacked-width-inset .events {
    padding-left: var(--sqs-site-gutter);
    padding-right: var(--sqs-site-gutter);
}
}

Insofar, the code above helped a lot of problems, but I am still dealing a lot with problem, especially when screens get bigger. 

Some similar problems I am facing:

  • When I add background to a text section, the box doesn't align with the rest of the site. Here is an example: https://reload.dk/case-stories/information
  • The menu (which I got from Ghost plugins) does not align with the menu, like it should)
  • In general, there are some weird jumps between screen sizes when I scale the browser window. I wish they were more fluid, but the breakpoints are really noticable... People on 13" macbooks really notice this. 


The link to the site (which is live): www.reload.dk 

Screenshot 2023-02-27 at 12.02.31.png

Screenshot 2023-02-27 at 12.02.21.png

Link to comment
  • Replies 4
  • Views 331
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

<

On 3/5/2023 at 3:21 AM, tuanphan said:

Have you found a solution yet?

Not a perfect solution, but I did manage to make a lot of padding to different types of content block like:

/* Desktop blog padding */
@media screen and (min-width:768px) {
.blog-basic-grid.collection-content-wrapper, .tweak-events-stacked-width-inset .events {
    padding-left: 0;
    padding-right: 0;
}
}
@media screen and (min-width:768px) and (max-width:1400px) {
.blog-basic-grid.collection-content-wrapper, .tweak-events-stacked-width-inset .events {
    padding-left: var(--sqs-site-gutter);
    padding-right: var(--sqs-site-gutter);
}


And that fixed some of it to an extent. Then I added this to make sure, that the backgrounded text boxes, summary boxes would align better: 

 

body[id*="item-"] .sqs-block.accordion-block {
  margin-left: 17px;
  margin-right: 17px;
}

body[id*="item-"] .sqs-block.html-block.sqs-background-enabled {
  margin-left: 17px;
  margin-right: 17px;
}

body[id*="item-"] .sqs-block.summary-v2-block {
  margin-left: 17px;
  margin-right: 17px;


Right now I am left with this problem, but once this is fixed, I am at a place where the solution is OK for me: 



But I am still curious about why the site from the get go doesn't have a max width that everything adheres to... I put in max width in the design styles, but some stuff, like summary boxes and text backgrunds, don't care about that. Also I experienced a lot of problem with blogs and events having extra padding and not aligning with the menu. 

I know this isn't a place to complain about the general product that is Squarespace - and I am happy with Squarespace. I just wonder...

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.