Height of dark background with text over image not consistent across browsers

[Adams]

Hello. Awhile back you helped me with putting text with a dark background over an image on our home page at https://www.thumbprintbooks.ca/ That post is at https://theme.co/apex/forum/t/text-with-dark-background-band-over-image-at-bottom-of-image/20145/13.

Recently (probably after upgrading Pro—version 2.1.6 is installed) I noticed that the dark background is sized as originally designed when viewed in Firefox for all devices.

However, in BOTH Chrome and Edge, the dark background is larger, and the text is top aligned with the background for devices that are WIDER THAN 767 pixels.

The dark background, gold headline with line, and white text are in a column that uses the following global CSS as the class:

.flex-row {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-end;
}

The custom inline CSS for the column is:

max-height: 94vh; padding-top: 67vh;

Padding for the row with the background image is set as follows:
For devices 980px and wider, right and left are 25% and bottom is 5%
For devices 768-979px, right and left are 20% and bottom is 5%
For devices 481-768px, right and left are 15% and bottom is 5%
For devices 480px and smaller, padding is 0

For SEO purposes, it is critical to have the headline and text line searchable, so I can’t create the look using Photoshop. In previous versions of Pro, the height of the dark background box relative to the headline and text was displayed consistently across all browsers that I tested.

Is it possible to center the headline and text line vertically in the dark background box?

[ruenel]

Hello There,

Thanks for writing in! I think you are having a caching issue. Please go to CloudFlare.com and login with your account. You will need to purge you site cache and test your site again. I have a hunch that there is a conflict between the codes from the latest updates not being served by CloudFlare. Old cache version is used in displaying your site. Purging the site cache should resolve this.

And to align the headline and test at the middle of the column, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-section .x-container.marginless-columns>.x-column {
    vertical-align: middle;
}

Please let us know how it goes.

[Adams]

I have purged the site cache on Cloudfare, and will wait for a bit for that to be propagated through Cloudfare’s network. Then I’ll see if the problem is resolved.

If I enter that Custom CSS (I use Pro, not Cornerstone), will that change all columns on the website to be middle-aligned vertically?

[Adams]

Purging the site cache on Cloudfare did not resolve the problem when viewing https://www.thumbprintbooks.ca/ in Google or Edge. I did clear all history in those browsers before going to that web page.

I added your custom CSS to the global CSS, but it made all columns on the website to be middle-aligned vertically. I don’t want that to happen globally—just to this column. So I have removed it from the global CSS. Please let me know what code I can use to align the text vertically in this column only (I hope element CSS can be applied to the column). Thank you.

[ruenel]

Hello There,

So that you can apply the code only in that section, please edit the page and insert a custom class in your section. I can see that you are using flex-row. You can update the code and use this instead:

.x-section.flex-row .x-container.marginless-columns>.x-column {
    vertical-align: middle;
}

Please let us know if this works out for you.

[Adams]

Thank you. That resolved the problem.

[nico]

Hi @Adams,

Happy to hear that.

Feel free to ask us again.

Thanks.