Klintholm

Sorry, I realize now my problem is twofold... 1) that the yellow box and the accordion on the https://reload.dk/jobs is not only a problem on mobile. It also misaligns on desktop. I've used these snippets to fix everything else on the site, but somehow they don't get these two on "jobs" site. 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; } 2) The carousel at the bottom of https://reload.dk/hvem-er-vi is misaligned on mobile. I don't know why? EDIT: NEVERMIND I FIXED IT WITH YOUR CODE. Still need help with issue 1) here, tho. Thank you in advance! UPDATE: I fixed a lot of the problems by upgrading the boxes to Fluid Engine!

So @Beyondspace I need help with the boxes on https://reload.dk/jobs and the carousel (on mobile) on https://reload.dk/hvem-er-vi

They do. The problem is still there. It's a slight misalignment. 17px, I presume.

I already have this code in my custom CSS, but for some reason it doesn't target the boxes on that particular page... body[id*="item-"] .sqs-block.accordion-block { margin-left: 17px; margin-right: 17px; }

Anybody? @Beyondspace can you still help me? Much appreciated!

Yes, of course. These were done on my phone quickly - hope they make sense to you!

Hey @Beyondspace Why doesn't the code hit the accordion and text block on this page? https://reload.dk/jobs

< 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...

Hey guys, On mobile my site, www.reload.dk, has different gutters/padding. I want it to align. https://reload.dk/hvem-er-vi/teamet and the carousel at the bottom of https://reload.dk/hvem-er-vi are slighter wider than the rest of the site. How do I fix this? Thanks in advance!

Is there a way to make the speed variable? So that it speeds and slows down at the beginning and end?

I solved it! Feels amazing, thanks @Beyondspace body[id*="item-"] .sqs-block.html-block.sqs-background-enabled {margin-left: 17px;margin-right: 17px;}

Amazing, thanks! I'll mark it as solved, but what about these small text boxes? https://reload.dk/case-stories/dds-track https://reload.dk/case-stories/information

Here is a great example of how we also use the background-function to make boxes, that I want aligned: https://reload.dk/case-stories/information

This works perfectly - BUT only for that one specific site. We have a lot of articles and use that content type a lot. Can I do it with site-wide?

I am using the "background" function to create colored boxed for facts, quotes and other stuff. However, I wished they would align with the rest of the site. An example: https://reload.dk/viden/hvilket-cms-system I wish the gray boxes during the article would align with the text. At the bottom, I wished the summary block would align with the borders of the sites. This is a site wide problem, not just for this specific site. Thanks in advance!

And just to clarify, the background image-alignment issues is a site-wide issue for me. I use the "background" function a lot to make boxes in articles etc. So I don't want to make it for each and every section ID that is on the website, if possible.

I think I solved it using /* Mobile gallery */@media screen and (max-width:767px) {.gallery-grid-wrapper {grid-template-columns: repeat(3,1fr) !important;}} At least on the phone, it looks good!

I want to do the same with my logowall at the bottom of www.reload.dk Three images on a row on mobile. Thanks!

The two attached photos showcase two of the problems: 1) menu text isn't aligned with the hamburger icon 2) background section of the text doesn't align with rest of the page. I chose inset, but still way to wide on a bigger screen.

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

Thank you! This works almost perfectly.

It want the overview of posts (the basic grid blog) to align with the header and the footer on the left and the right side.

Yes! As you can see on www.reload.dk/viden

First image shows how the padding on the blog section aligns with the menu. The second image shows how below 1400px, it starts to go all the way out to the sides.

Thank you for replying! So this doesn't fix it completely, unfortunately. There is a sweet spot between 768px and circa 1400px, where there is zero padding and the blog contents does not align with the menu header and the footer.