Skip to main content
Deaf_Guy
Deaf_Guy
Inspiring
March 17, 2023
Answered

Seeking help making a CSS adjustment to box height

  • March 17, 2023
  • 1 reply
  • 500 views

Hi - hoping someone can help me with this.

https://www.perque.com/test-testimonials

The above page I put into DW to try to make an adjustment. This is a WP page with a supposedly friendly plugin that looks similar to Adobe Premiere's timeline layout. I got the page set up using a template from the plugin but am trying to make all of the rounded corner boxes the same height as the 2nd and 3rd ones - definitely not the first one [with red BG]. The "support" team for this plugin has been telling me to try this and that but nothing works. They told me to adjust the text layer and that definitely doesn't work. They make the SW for goodness sake buy don't know how to help me LOL.

This plugin allows you to add CSS but I even tried to find the appropriate code out of DW and using Inspect but it acts weird there because every time I select the box and go down to get the code, it changes. So hoping someone can help. And one other important thing - if you look at the page on a phone, it looks good there too, especially the 2nd and 3rd trstimonial boxes. However, if I add code to fix the height of all of the boxes, it obviously would have to still look good on phones too.

Any help is greatly appreciated. Thank you.

This topic has been closed for replies.
Correct answer Nancy OShea

Ask the plugin maker.  It's unclear from the code if layout is coming from CSS or JS code.  

 

Height is never expressed in explicit values because content inside it varies as do viewport sizes. Boxes must remain flexible.

 

Equal height columns are fairly easy to achieve with simple CSS Flexbox like this:

<style>
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
</style>

 

<h2>Equal Height Columns with Flexbox</h2>
<p>Make the columns match the height of the tallest column.</p>

<div class="col-container">
<div class="col" style="background:orange">
<h2>Column 1</h2>
<p>Hello World</p>
</div>

<div class="col" style="background:yellow">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>

<div class="col" style="background:orange">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>

 

Hope that helps.

 

1 reply

Nancy OShea
Community Expert
Nancy OSheaCommunity ExpertCorrect answer
Community Expert
March 17, 2023

Ask the plugin maker.  It's unclear from the code if layout is coming from CSS or JS code.  

 

Height is never expressed in explicit values because content inside it varies as do viewport sizes. Boxes must remain flexible.

 

Equal height columns are fairly easy to achieve with simple CSS Flexbox like this:

<style>
.col-container {
display: flex;
width: 100%;
}
.col {
flex: 1;
padding: 16px;
}
</style>

 

<h2>Equal Height Columns with Flexbox</h2>
<p>Make the columns match the height of the tallest column.</p>

<div class="col-container">
<div class="col" style="background:orange">
<h2>Column 1</h2>
<p>Hello World</p>
</div>

<div class="col" style="background:yellow">
<h2>Column 2</h2>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
<p>Hello World!</p>
</div>

<div class="col" style="background:orange">
<h2>Column 3</h2>
<p>Some other text..</p>
<p>Some other text..</p>
</div>
</div>

 

Hope that helps.

 

Nancy O'Shea— Product User & Community Expert
Deaf_Guy
Deaf_GuyAuthor
Inspiring
March 17, 2023

Thank you so much really appreciate it.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices