Jump to content

Styling multiple blocks

Recommended Posts

Site URL: https://www.ajollyconsulting.co.uk/risk-consulting

I've added a drop shadow to an image which worked great: https://www.ajollyconsulting.co.uk/visa-global-acquirer-risk-standard

I wanted to add to other images on the site (but not all), but when I added the other block to the CSS it started behaving oddly by adding a white margin to the left of the second block.

The page with the second block that won't play ball is: https://www.ajollyconsulting.co.uk/risk-consulting (CSS since removed as it's live)

I used:

#block-cb70d638ae2ff944299b, #block-yui_3_17_2_1_1619789644452_40023 .image-block-outer-wrapper { 
box-shadow: -10px 10px @ajcteal !important;}

and also tried:

#block-cb70d638ae2ff944299b, #block-yui_3_17_2_1_1619789644452_40023 {.image-block-outer-wrapper { 
box-shadow: -10px 10px @ajcteal !important;}}

I also tried repeating the CSS and having them both separate but nothing worked.  I've since discovered that, even if I delete the CSS for the first - working - one, this second one still displays oddly. So am now realising it wasn't me not getting the code right when adding multiple blocks, but something specific to that second block. 

I can see when inspecting the page that there is a margin applied:

.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic {

margin: auto;}


BUT I can't seem to target it away!
 

Link to comment
  • Replies 2
  • Views 1.6k
  • Created
  • Last Reply

Use this code

/* risk consulting shadow */
div#block-yui_3_17_2_1_1619789644452_40023 .image-block-outer-wrapper {
    box-shadow: -10px 10px #06b9ca !important;
}
div#block-yui_3_17_2_1_1619789644452_40023 figure {
    max-width: 100% !important;
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

and some other problems, do you want to fix these?

Site URL – https://www.ajollyconsulting.co.uk/

1. (Tablet-Homepage) Reduce white space under header?

ajollyconsulting.co_.uk-01-min.png

2. (Tablet-Overlay Menu) I see 2 items have orange color. Want to fix this?

ajollyconsulting.co_.uk-02-min.png

3. (Mobile-Footer) Move newsletter to bottom of footer?

ajollyconsulting.co_.uk-03-min.png

4. (Tablet-Partnerships) Increase banner text width?

ajollyconsulting.co_.uk-04-min.png

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


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