Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Adding a colour box across 3 text blocks


jsaddleton

Question

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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

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 post
  • 0

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

 

You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...