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

VirNinja

Circle Member
  • Posts

    14
  • Joined

  • Last visited

Reputation Activity

  1. Like
    VirNinja got a reaction from Piebie in Adding a colour box across 3 text blocks   
    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>  
×
×
  • Create New...