Jump to content

How to align background colors with rest of site

Go to solution Solved by Beyondspace,

Recommended Posts

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!

Link to comment
  • Solution
17 hours ago, Klintholm said:

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!

You can try adding to Home > Design > Custom css

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


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

Support me by pressing 👍  or marking as solution if this useful for you

Edited by Beyondspace
apply for all pages

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
1 hour ago, Beyondspace said:

You can try adding to Home > Design > Custom css

#item-62e3902a2064be2afa706ba9 .sqs-block.accordion-block {
  margin-left: 17px;
  margin-right: 17px;
}


#item-62e3902a2064be2afa706ba9 .sqs-block.summary-v2-block {
  margin-left: 17px;
  margin-right: 17px;
}

Support me by pressing 👍  or marking as solution if this useful for you

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? 

Link to comment

You can try my new code and check if it works properly

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 2/28/2023 at 4:17 PM, Beyondspace said:

You can try adding to Home > Design > Custom css

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


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

Support me by pressing 👍  or marking as solution if this useful for you

Hey @Beyondspace

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

 

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.