Docs

[newskywebsites]

Hi there,

I’m working on this new site: http://dawnk.sg-host.com/

It’s using Church expanded demo. I want to fix the section that shows “Join Us” in one column and the video in the other column so they are always the same height, until they wrap on smaller screens. See attached screenshot of what I DON’T want where the section background shows on smaller screens as the video isn’t tall enough. How can I fix this so they are always the same height?

Latest version of everything. Using child theme and latest Cornerstone.

Thanks!
Dawn

[Nabeel A]

Hi there,

Thanks for writing in! Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (min-width: 768px) and (max-width: 1150px) {
.x-video .x-video-inner {
    padding-bottom: 100% !important;
}
}

.x-section .x-container.marginless-columns .x-column.x-1-2 {
    padding: 0 !important;
}

Let us know how this goes!

[newskywebsites]

That will work for now! Thanks so much! It cuts off the left and right of the video, but I’ll see what the client says. I get it that something has to give. 🙂

Thanks for the speedy response!
Dawn

[Nabeel A]

Glad we could help 🙂

Cheers!

[newskywebsites]

Wait, this isn’t working the way I’d like and perhaps there are other options. See screenshot. I don’t want the video side to be the height of the text side. I don’t want black bars at the bottom and top. Instead, I’d like the text side to respond to the video size and automatically be the same height (and have text be responsive too).

Is that possible? See screenshot.
URL: http://dawnk.sg-host.com/

Thanks!
Dawn

[Rupok]

Hi there,

I can’t see the black bars on my end for any screen size. Can you check again and clarify which screen size it is? Make sure to check with another browser meantime.

Cheers!

[Author]

Posts