Fix padding on mobile

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! 

4 hours ago, Klintholm said:

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! 

Can you show some screenshots where you want to fix?

6 hours ago, Beyondspace said:

Can you show some screenshots where you want to fix?

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

Anybody? @Beyondspace can you still help me?

Much appreciated!

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;
}

The 2 above pages look good on my end. Do they still need help?

3 hours ago, Beyondspace said:

The 2 above pages look good on my end. Do they still need help?

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

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

On 3/10/2023 at 2:12 AM, Klintholm said:

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

With Yellow Box, add this to Design > Custom CSS

/* align yellow box mobile */
@media screen and (max-width:767px) {
[data-section-id="632c3c935266776cbb1ce9c9"] .content-wrapper {
    padding-left: 17px !important;
    padding-right: 17px !important;
    width: calc(~"100% - 34px") !important;
}
}

On 3/13/2023 at 2:30 PM, Klintholm said:

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! 

Did you solve all or still need help?