Container height on different screens

[logoglo]

Hi there, so I have a header setup for mobiles only here:

Affordable Logo Design & Graphic Design | Logoglo

(ipads and desktop, its a slider)

I wanted to know, how would I make that container always fit the correct device size, the height, because as it is now, it sometimes gets cut off, or is too long etc…I want it full height 100% on each device’s screen, is this possible?

I tried adding “height: 100vh;” to the container’s css, it kind of works, but the text near the bottom of that container, still gets cut off on some screens, and others like iphone pro, is too long, so the text is there, but there is a lot of space under it, I want it to be height responsive.

Thanks.

[friech]

Hi @logoglo,

Thank you for writing in, are you referring to this standard header? , you said its a slider but I don’t see any slider in there, can you clarify?

@logoglo

I tried adding “height: 100vh;” to the container’s css, it kind of works, but the text near the bottom of that container, still gets cut off on some screens

Use CSS calc() function e.g. calc(100vh - $px); where $ is the offset so the container can be true 100vh

calc() - CSS: Cascading Style Sheets | MDN

Cheers,

[logoglo]

Yeahs, its a slider on desktops and tablets only, so mobiles its a standard container…Im not sure I follow what you said, what would be the offset?

Basically, you can see below, how its is responding to different sized screens, I want them all to look the same, so that bottom line of text to stay in the viewport of all screen sizes… Right now, they get cut off, or produce a big gap at the bottom.

[ruenel]

Hello @logoglo,

When the screen gets smaller, there isn’t enough space to display the elements. You can reduce the font sizes on smaller screens so that it would somehow fit on the screen. Go to X > Theme Options > Typography > Root Font Size and change the XS and SM breakpoints from 16 to 12.

Hope this helps.

[logoglo]

Thanks, but google recommend a minimum of 16 font size …either way, the smaller fonts will look out of place, and will have loads more space on the iphone x for example…

so there isn’t a way to force the actual container and contents to be 100% height always, and fit each screen? So like revslider does, full screen…no way of achieving this without a slider?

If not, is there a way to horizontally align in the middle of screens? so the longer screen that has the space at the bottom, for the info to be centered?

Also, I didnt understand this " Use CSS calc() function e.g. calc(100vh - $px); where $ is the offset so the container can be true 100vh" can you explain, am I doing it right? or do I need to change what I have?

[friech]

Hi @logoglo,

Use these custom properties to force the column to be 100vh

.your-column-selector {
    min-height: calc(100vh - 75px);
    display: flex;
    flex-direction: column;
    align-items: center;
}

Notice the min-height: calc(100vh - 75px);, 75px is the height of the header that we need to offset, I saw there is actually a 50px set height on the header for whatever reason, but the header actual height is actually 75px

Then apply a margin-top: auto; on the text; “You’re unique, so your logo should be too.”

The display: flex; is there, so we can apply a margin-top: auto; on the text You’re unique, so your logo should be too., that is one technique to keep that text at the bottom of the screen regardless of the screen-size.

If you need the image to be vertically center, apply a margin-top: auto; and margin-bottom: auto; to that image.

Hope it helps.
Cheers,

[logoglo]

Hi, I tried adding that css, but it had this effect:

Let me explain, maybe there is somethign here that is casuing the above. I have a container with the gradient background. Within that I have 2 containers, one with a slidewr, one with static fonta and images, one shows on mobile, one on desktop. to show the mobile it has its own class, so I added your code to that and it di the above…

.content-desktop {
    display: block
}

.content-mobile {
    display: none
}

@media screen and (max-width:767px) {
    .content-desktop {
        display: none
    }
    .content-mobile {
        display: block;
      min-height: calc(100vh - 75px);
    display: flex;
    flex-direction: column;
    align-items: center;
    }
}

I removed the flex part, and its looking better, but the issue of it not going 100% height, still exists: (cutting off the bottom)

[logoglo]

I think I have it looking how I want, its not filling the screen 100% height, but its looking better, thanks for all your help.

[marc_a]

Hi @logoglo,

You’re welcome and we’re glad that you’re able to figure it out! If you have any other concerns or clarifications regarding our theme features, feel free to open up a new thread.

Thank you.