Jump to content

Adding a colour box across 3 text blocks

Recommended Posts

Site URL: https://goose-magnolia-r53a.squarespace.com/config/settings/site-visibility

HEEEELLLP please

I can't do something that should be so simple - I want to add a colour block behind 3 text blocks - (on my services page - the BRAND ID Package). I know i can change the colour of each box but i dont want to separate them.

Additionally I do want to seperate the boxes on the ADD-ON part a little further down, but cannot see a way to make the boxes the same height or get the line breaks in where i need them.

Please can anyone help?

Password: Orlabean16

Link to comment
  • Replies 2
  • Created
  • Last Reply

Hi, @jsaddleton. We had a similar need recently, and this is how we solved it. It involves adding a second set of elements to find the height (so you can maintain responsive sizing). I have a copy of a working html file for you here. Just extract the bits you need and place them appropriately within your site. Also, this is written so you can use just one code block instead of multiple. 🙂

<!doctype html>

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <style>
        body {
            background: #f7f0e9;
        }
        
        .add-ons,
        .add-ons-baseline {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-box-pack: start;
            -moz-box-pack: start;
            -ms-flex-pack: start;
            justify-content: flex-start;
            -webkit-align-content: flex-start;
            -ms-flex-line-pack: start;
            align-content: flex-start;
            -webkit-box-align: start;
            -moz-box-align: start;
            -ms-flex-align: start;
            -webkit-align-items: flex-start;
            align-items: flex-start;
        }
        
        .add-ons-baseline {
            width: 100%;
            visibility: hidden;
            overflow: hidden;
        }
        
        .f0dcd0,
        .f0dcd0-baseline {
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            background: #f0dcd0;
            padding: 30px;
            text-align: left;
            width: 100%;
            height: 100%;
            margin-bottom: 1.5rem;
            margin-block-end: 1.5rem;
        }
        
        @media only screen and (min-width: 640px) {
            .add-ons,
            .add-ons-baseline {
                -ms-flex-direction: row;
                flex-direction: row;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            }
            .f0dcd0,
            .f0dcd0-baseline {
                height: 100%;
                width: 48.5%;
                margin-right: 3%;
            }
            .f0dcd0:nth-child(2n),
            .f0dcd0-baseline:nth-child(2n) {
                margin-right: 0%;
            }
        }
        
        @media only screen and (min-width: 768px) {
            .f0dcd0,
            .f0dcd0-baseline {
                height: 100%;
                width: 31.333%;
            }
            .f0dcd0:nth-child(2n),
            .f0dcd0-baseline:nth-child(2n) {
                margin-right: 3%;
            }
            .f0dcd0:nth-child(3n),
            .f0dcd0-baseline:nth-child(3n) {
                margin-right: 0%;
            }
        }
    </style>
</head>
<html>

<body>
    <div class="add-ons">
        <div class="f0dcd0">
            <h3>The Print Package</h3>
            <ul>
                <li>Stationery design</li>
                <li>Packaging design</li>
                <li>Postcard design</li>
            </ul>
            <p>(includes all print handling)</p>
        </div>
        <div class="f0dcd0">
            <h3>The Social Package</h3>
            <ul>
                <li>Optimised social media banners</li>
                <li>Social media templates</li>
            </ul>
        </div>
        <div class="f0dcd0">
            <h3>The Social Package</h3>
            <ul>
                <li>5 Highlight icons</li>
                <li>3 Custom aniimated GIFs</li>
                <li>3 Grid templates</li>
            </ul>
        </div>
    </div>
    <div class="add-ons-baseline">
        <div class="f0dcd0-baseline">
            <h3>the print package</h3>
            <ul>
                <li>Stationery design</li>
                <li>Packaging design</li>
                <li>Postcard design</li>
            </ul>
            <p>(includes all print handling)</p>
        </div>
        <div class="f0dcd0-baseline">
            <h3>The Social Package</h3>
            <ul>
                <li>Optimised social media banners</li>
                <li>Social media templates</li>
            </ul>
        </div>
        <div class="f0dcd0-baseline">
            <h3>The Social Package</h3>
            <ul>
                <li>5 Highlight icons</li>
                <li>3 Custom aniimated GIFs</li>
                <li>3 Grid templates</li>
            </ul>
        </div>
    </div>
    <script type="text/javascript">
        $(document).ready(function() {
            var addOnCard = $('.f0dcd0'),
                addOnCardBaseline = $('.f0dcd0-baseline'),
                addOnCardHeight = 0,
                containerToHide = $('.add-ons-baseline');
            $(addOnCardBaseline).each(function() {
                if ($(this).height() > addOnCardHeight) {
                    addOnCardHeight = $(this).height();
                    containerToHide.css('height', '0px');
                } else {}
            });
            $(addOnCard).height(addOnCardHeight);
            $(window).resize(function() {
                containerToHide.css('height', 'auto');
                var addOnCardHeight = 0;
                $(addOnCardBaseline).each(function() {
                    if ($(this).height() > addOnCardHeight) {
                        addOnCardHeight = $(this).height();
                        containerToHide.css('height', '0px');
                    } else {}
                });
                $(addOnCard).height(addOnCardHeight);
            });
        });
    </script>
</body>

</html>

 

Link to comment

Hi,

1. I see you used Code Block to create this. I think you can use Image Block, Markdown Block or Text Block + CSS (you can create first, I will give CSS for free)

2. You can use CSS Flexbox or Grid to equal height, add this to Home > Design > Custom CSS

@media screen and (min-width: 768px) {
div#page-section-5ec2ed8df2a1a93da4d70eac {
	/* set grid 3 items per row */
	.span-12>.row.sqs-row:nth-child(6) {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-column-gap: 50px;
    grid-row-gap: 10px;
}
  /* remove blank columns */
  .span-12>.row.sqs-row:nth-child(6) .span-1 {
      display: none;
  }
  /* set fullwidth content in columns */
  .span-12>.row.sqs-row:nth-child(6)>div:not(.span-1) {
      width: 100%;
      background: #f0dcd0;
  }
  /* reset row width */
  .span-12>.row.sqs-row:nth-child(6) {
      margin-left: 5vw;
      margin-right: 5vw;
  }
  /* fix bug */
  .span-12>.row.sqs-row:nth-child(6):before {
      grid-column: 1 / span 4
  }
}
}

 

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.