Row not showing up on large display

[jjmil03]

Hello,

For some reason, the text in a row of a column is not showing up. However, when I shrink the window and look at the mobile version, I can see the text, but not all of it, near the top. I’m not sure what’s going on, and I’ve checked on a few different browsers so far. I’d appreciate any help!

Jon

[ruenel]

Hello There,

Thanks for posting in! You are experiencing this issue because of your column height being set to height: 50vh; I would recommend that you change it to min-height: 50vh; so that the rest of the text will be displayed no matter what.

Hope this helps. Please let us know how it goes.

[jjmil03]

I attempted this fix, and now it is showing as full screen for both. Not sure what happened there…

Jon

[Alaa]

Hi Jon,

Do you have a screenshot or mock up showing how exactly you want these sections to appear on both desktop and mobile?

Thanks.

[jjmil03]

I mean basically I wanted both to show up in the screen - so one to take up 50% of the screen and the other one the rest, minus the masthead and all of that.

I’ve since changed it so that there are two vertical columns for the desktop view, and am using this one for the mobile, so I don’t even know if I can make it fit now to begin with - but on the desktop that’s what I wanted to do - just can’t figure out a way of making it work.

Jon

[Prasant]

Hello @jjmil03,

Thanks for updating the thread.

It looks like you have a similar or other ticket posted and you are currently working on the same as while I was testing the data kept on updating. Regarding you latest reply, can you please elaborate the point you are trying to make? I am quite confused with the same.

Other topic: https://theme.co/apex/forum/t/align-a-row-to-the-bottom-of-a-section/38094/6

Thanks.

[jjmil03]

Sorry about that, this was initially two separate issues on the same page that has how sort of merged into one.

Basically what I wanted to do, was to have two sections stacked on top of one another, both with an image for the background, and both fully viewable on the screen at the same time. So initially I set the height to 50vh for both, thinking that the setting would split the viewing screen between the two sections. So far, it has not done that, and I have to scroll to see the bottom part of the second section that sits underneath the first.

Does that make more sense?

Jon

[Alaa]

Hi Jon,

Could you please check this demo page I’ve created and let us know if this is close to what you want?
http://wp.holyangelssidney.com/testing/

That’s the least space you could have between these two rows elements.

If that’s what you want, you can save this page as a template and import its layout into any existing page you have.

To learn more about how to use Template Manager you can check this guide:

Template Manager | Themeco Docs

Thanks.

[jjmil03]

That is close, but I would like both sections to fit the page height. Does that make sense? Half of the page should be the “Interested.” and the other half “Already Catholic,” such that you don’t see the footer unless you scroll down, and such that you see the entire bottom section without having to scroll down. That’s why I was trying to use “50vh” on two different sections.

I appreciate the help!

Jon

[ruenel]

Hello There,

Thanks for writing in! I would recommend that you insert a class in your columns that needs to be 50vh. Please insert a custom class half-screen-columns in each of the columns and use this custom css instead:

@media(min-width: 980px){
   .half-screen-columns {
      height: calc((100vh - 190px)/2) !important;
   }
}

This code will only work in larger screens. This will not affect the smaller screens like the phones and besides the content of the columns is just enough to be displayed in the smaller screens. You cannot apply 50vh in smaller screens because the contents will just be cut off.

Hope this helps.