Wordpress row consistent size on all pages

Mark M

Mark M

Mark M

Soldato
Joined
6 Jan 2006
Posts
3,422
Location
Newcastle upon Tyne
Im using WPbakery and inserting a row with an orange background at the top of a page with a text title on it and a couple of lines of text. Im adding 250px padding to the bottom however the sizes differ as some pages have 2 lines of text and some have 3.

How can I achieve a row to be a fixed height on all pages regardless of content?

Thanks
 
There should be multiple ways of achieving this. You can have a row with a CSS style with "height" attribute specified in pixels. You could also have a row as as, but all content in it wrapped in a div with aformentioned CSS on that.

Have a look HERE.
 
Last edited:
You also need to consider your text content. If it’s variable length then you’ll need to visually truncate it.

If I were implementing this I’d start with the text content itself. Decide you want to limit it (e.g. single line with an overflow ellipsis if it’s longer than a desired max)

Then pad your container as described, this will allow the browser to account for any text rendering differences, while still being consistent in size.
 
The biggest problem you will have is that as screen sizes changes the text rows will increase.
If you fix it to a single size then you might encounter a screen size where the text overflows the height you set.

The only way I can think you could overcome this is if you set periodic height changes based on screen widths, using CSS media queries.

You can use css flex to align the content center and justify content centre so it always appears in the middle of your set height row.

It's pretty bad practice doing this though, so I have to ask, why do you want to have a consistent size?
 
You must log in or register to reply here.
Back
Top Bottom