Docs

[thisisbbc]

Hello guys,

We’re trying to have two sections displayed side by side with two different background colors.

We want the sections to be sized automatically so if one side has a bigger height than the other, both sections will still be centered.

Here’s the page : http://www.nationhats.com/home-temp/

I have attached two screenshots.

Do we necessarily have to use media queries to achieve this or is there a more clever way of using CSS?

Thank you!

[Friech]

Hi There,

Thanks for writing in! Please add a class column-left and column-right to your left and right column respectively. And then Add this on Custom JS on Customizer.

jQuery(document).ready(function($){
$(".column-right").height($(".column-left").height());
});

Currently your blue background is only applied on the content-band, not on the column where is was place. You need to apply the blue background to directly to the column, because right now even if we add a height on column the blue background wont fill it.

.column-right {background-color: #1e73be !important;}

Hope it helps, Cheers!

[thisisbbc]

Hey Friech,

Thank you for the provided solution.

Do we absolutely have to use javascript for this?

There are two issues with this solution :

1) When we resize the page, we still have the same issue
2) Once the document is ready and the script fires, there are still some CSS that may change the size of the section and then the height is not the same for both columns

If we want to use a purely CSS solution I guess there wouldn’t be any other way but to use media queries to cover the changes in the dimension of each columns?

Thank you for your help!

[Rue Nel]

Hello There,

Thanks for updating in! You have a nested content bands and one of the solutions to resolve the issue is to use Javascript. At the moment, the script is only rig to change the height upon loading. If you want to include as you resize browser, you can make use of this code instead:

(function($){
  $(document).ready(function($){
    $(".column-right").height($(".column-left").height());
  });

  $(window).on('load resize', function(){
    $(".column-right").height($(".column-left").height());
  });
})(jQuery);

As an alternative, you can make use of a custom css. Please add the following css code in the customizer, Appearance > Customize > Custom > Edit Global CSS

@media(min-width: 768px){
  .page-id-14678 #x-content-band-3 .x-container {
    display: table;
    width: 100%;
  }

  .page-id-14678 #x-content-band-3 .x-container .x-column.column-left,
  .page-id-14678 #x-content-band-3 .x-container .x-column.column-right {
    display: table-cell;
    float: none;
  }

  .page-id-14678 #x-content-band-3 .x-container .x-column.column-left {
    background-color: #d75f12;
  }

  .page-id-14678 #x-content-band-3 .x-container .x-column.column-right {
    background-color: #1e73be;
  }
}

Please keep in mind that this is not a bulletproof solution. And this might not work if you have the JS code. You will need to remove it so that it will not have in conflict with this other solution.

Hope this helps.

[Author]

Posts