Copy link to clipboard
Copied
Hi,
I have a landing page I'm working on and am having trouble getting both responsive boxes to maintain equal height. One has more content than the other. How could I possibly get this to work? Here is a link to the page I'm working on:
Thanks for any help.
UPDATE: I changed the boxes to display: table-cell; which worked but now they won't move on top of one another when sized to mobile
That's due to your setting a pixel height of 300 on content that's over 300 pixels tall.
Removing the height settings for .left and .right should do the trick.
Copy link to clipboard
Copied
Since you don't want table-cell on mobile widths, put your table-cell into a media query for desktops.
Copy link to clipboard
Copied
OK. Thanks Nancy. Would this enable them to stack on mobile if I refer to table-cell in only desktop query?
Copy link to clipboard
Copied
I would wrap the parent container in a Table first.
<style>
/**vertically aligned in medium, large displays**/
@media only screen and (min-width: 768px) {
.concontainer {
display: table;
table-layout: fixed
}
.left-box, .right-box {
display: table-cell;
vertical-align: middle;
float: none;
}
}
</style>
Copy link to clipboard
Copied
Hey Nancy,
I got it work work. I tooled around in codepen. https://codepen.io/anon/pen/RQwYXX
thanks again for your help.
Copy link to clipboard
Copied
Use flexbox its so simple, you can even get the buttons to line up with each other instead of being staggered.
Copy link to clipboard
Copied
Thanks osgood! That was my next plan:)
Copy link to clipboard
Copied
OK. So took a shot at my first flexbox. Long over due. Got it to work. Kind of. Why would my content be dropping below and outside of the box? I can't get the buttons to center either. Would this be something to do with a wrap setting? This is what I'm looking at;
Copy link to clipboard
Copied
This is my css:
<!-- flexbox-->
<style>
.flexcontainer {
display:flex;
flex-wrap:wrap;
flex-direction:row;
justify-content:flex-start;
align-items:stretch;
}
.left {order:1; background-color:#0091b3; flex-basis:100%; height:300px;padding:35px;}
.right {order:2; background-color:#7a979f;flex-basis:100%; height:300px;padding:35px;}
@media screen and (min-width:600px) {
.flexcontainer {
flex-wrap:nowrap;
}
.left {
flex-basis:50%;
order:1;
}
.right {
flex-basis:50%;
order:2;
}
}
</style>
<!-- end flexbox-->
This is my html:
<div class="flexcontainer">
<div class="left">
<img style="margin:0 auto;display:block;width:80%;height: auto;margin-top:45px;" src="http://offers.premierinc.com/rs/381-NBB-525/images/pc-capitalanalytics_hires-white_720_con.png" alt="calogo" height="15" width="494"><p style="text-align:center; color: #ffc627;font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 38px; font-weight: 400;margin-bottom: 15px">FREE TRIAL</p><p style="text-align:center;font-family: 'Open Sans', Helvetica, Arial, sans-serif;font-size:20px;color:#b4c0c5;">vulputate vel, odio duis, qui vero, nulla suscipit qui in quis dignissim diam ullamcorper feugait, lorem. Ullamcorper adipiscing aliquip. Odio nulla et aliquam, quis facilisi.</p><a style="color: #ffc627; margin 0 auto;font-size:16px;font-weight:700;margin-top:-3px;padding:7px 15px 7px 15px;background-color:#transparent;border: 2px solid #ffc627;border-radius: 7px;line-height: 1.5;cursor: pointer;font-family: 'Open Sans', Helvetica, Arial, sans-serif;text-decoration:none;" href="#">FIND OUT HERE</a>
</div>
<div class="right">
<img style="margin:0 auto;display:block;margin-top:45px;margin-bottom:30px;" src="http://offers.premierinc.com/rs/381-NBB-525/images/hardhat_icon.png" alt="LineItemDetails" height="100" width="100"><p style="text-align:center; color: #ffc627;font-family: 'Open Sans', Helvetica, Arial, sans-serif; font-size: 38px; font-weight: 400;margin-bottom: 15px;line-height:1.25;">WHAT'S YOUR SOLUTION?</p><p style="text-align:center;font-family: 'Open Sans', Helvetica, Arial, sans-serif;font-size:20px;color:#b4c0c5;">vulputate vel, odio duis, qui vero, nulla suscipit qui in quis dignissim diam ullamcorper feugait, lorem. Ullamcorper adipiscing aliquip. Odio nulla et aliquam, quis facilisi.</p><a style="color: #ffc627; margin 0 auto;font-size:16px;font-weight:700;margin-top:-3px;padding:7px 15px 7px 15px;background-color:#transparent;border: 2px solid #ffc627;border-radius: 7px;line-height: 1.5;cursor: pointer;font-family: 'Open Sans', Helvetica, Arial, sans-serif;text-decoration:none;" href="#">FIND OUT HERE</a>
</div>
</div>
Copy link to clipboard
Copied
That's due to your setting a pixel height of 300 on content that's over 300 pixels tall.
Removing the height settings for .left and .right should do the trick.
Copy link to clipboard
Copied
Perfect! Thanks a bunch. How can I get the buttons to center? They center with the media query under 600px.