[onefoursixParticipant]

We were advised by yourselves to insert “min-height: 400px;” into the row to make the row heights all the same size.

It worked for a while but please look at some of the following links – it has stopped working on Firefox (although I believe it works on Chrome)

Any reason why?
http://146test2.co.uk/acorn/about-us/case-studies/case-study-wellingborough-homes/
http://146test2.co.uk/acorn/about-us/case-studies/case-study-statutory-support-services/
http://146test2.co.uk/acorn/about-us/case-studies/case-study-sdc/
http://146test2.co.uk/acorn/about-us/case-studies/case-study-nicholls-colton/

[Paul RModerator]

Hi,

You can add this under Custom > Edit Global CSS in the Customizer.

.x-section.my-section .x-container.marginless-columns .x-column.x-1-2 {
    width: 49.9%;
    min-height: 500px;
    display: inline-block;
}

Then add my-section in class field of your rows.

Hope that helps.

[onefoursixParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi again,

I checked your pages and I don’t see you’ve added my-section class to any of your row. Can you please add the class my-section in class field of your rows?

Thanks!

[onefoursixParticipant]

I have only done it on one page to test it:

http://146test2.co.uk/acorn/about-us/case-studies/case-study-bbc/

See – it ISNT working…

Any ideas? Need this sorting….

[RadModerator]

Hi there,

Seems to be okay, all columns have equal height, and they are all marginless column. Is that what you’re trying to achieve?

Would you mind providing a screenshot?

Thanks!

[onefoursixParticipant]

It is only on Firefox the issue is occurring. Can you ensure you check on Firefox please.

Screenshot Attached.

[Rue NelModerator]

Hello There,

I am another staff checking on this thread! I have tested your site in Firefox and I could not replicate the issue. Please check out my screenshot: http://prntscr.com/eou5o4

I would recommend that you clear your Firefox browser cache or use Private Browsing mode and test your site again.

Please let us know how it goes.

[onefoursixParticipant]

Your screenshot only proves that I am right.

those rows are not 400px high, and they are not all the same size. The bottom one is smaller in height. Surely you can see that?

[FriechModerator]

Hi There,

The min-height does not work in Firefox if the div is set to display: table which the ROW and Columns are. Use height: 500px; instead.

Or add this on your custom CSS.

@media (min-width: 768px) {
	.x-section .my-section {
	min-height: 500px !important;
	display: flex !important;
	}
}

Thanks,

[onefoursixParticipant]

Guys this STILL hasnt worked – http://146test2.co.uk/acorn/about-us/case-studies/case-study-bbc/

I really do hope we can sort this today as it is gettign tiring going round in circles.

[FriechModerator]

Hi There,

Where did you placed the last CSS code provided? I’m not seeing it on the Custom > Global CSS. I did go ahead added it, both rows has 500px height now. Clear your browser’s cache before you preview the page.

Thanks,

[onefoursixParticipant]

OK – I had done it but for ease I wont argue.

see – http://www.acorn-as.com/about-us/case-studies/

this is the live site. the wording needs to be aligned to the centre, which it was until you provided that code. I have used vertical-align:middle; already and it wont work..

ideas? this is very urgent now as it is on a live site.

[Paul RModerator]

Hi,

Please use height instead of minimum height in your rows.

I change the css code to this.

@media (min-width: 768px) {
    .x-section .my-section  {
       height: 500px !important;
    }
}

Just make sure everything is visible with that height.

Hope that helps.

[Author]

Posts