Group 100% Height Screen with 2 Elements

[manuuug]

Hi!

I’m trying to make this startup group always occupy 100% of the screen; where the main image “that appears above” fits the always fixed height of the text section below. I explain:

Situation 1:
– I have the main image at 80% of the screen (in a group) and the title at 20% (in another group) (I have a custom CSS code to be able to do this). This works fine in only a few situations, as when I have narrower screens the browser skips a line of the text. So it is normal because if the typography is not responsive, it is forced to perform a line break

Incorrect Display (https://i.imgur.com/AxcXXLI.png) (Skip a word in the subtitle)
Correct display (https://i.imgur.com/jKlSdaS.jpg)

So my idea was to be able to group everything in the same group, as long as it always occupies 100% of the screen and the image above (which is currently 100% larger than my screen), I want it to be cut respecting the space you need the title group. As long as the title text is never lost; either between 20% – 35%. I have tried to do it because of the options proposed by the template, but I can’t do it. A while ago, it sounds to me that I read a similar post on this forum but I can’t find it.

It would be a great help. I attach a video to better explain the problem I have now

https://www.loom.com/share/367d419134674b21aa605b80377e9261

Really Really Thanks! Your BM It’s incredible!!

[SeaTheme]

Hi,

Do you mean to want the 2 Groups should occupy 100% of the screen?

You should use 2 Group(1st is 80% height, 2nd is 20%) modules still, please don’t use Single Image into the 1st Group.
Please set the image as the background image for the 1st Group.

tips: If the height of the module is more than the height of the group, the group would be with modules height. more

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[manuuug]

Hi,

I am currently using 80% / 20% in a project and this is what I tell you in situation 1. This only works and is visible well when the screen is long, otherwise it does not make sense, since the first group will never be reduced if the one below I need one more line of text.

I am attaching a video.
https://www.loom.com/share/a9defab0b905477c806461751d1c3e96

Regards!

[SeaTheme]

Hi,

May I check this webpage? Please leave the URL, thanks!

Regards!

[manuuug]

Right now, it’s on an internal network, which cannot be accessed from the outside. Is it possible to show it to you in some other way?

[SeaTheme]

Hi,

I created a demo, is it what your layout?
https://art.seatheme.net/portfolio3/2-mods-in-the-same-window/

You could try to re-define(reduce) the font size by the custom CSS for the smaller size screen.
like:

@media(max-width:1000px) and (min-width:768px) { 
 #text-under-cover h2 {
    font-size: 26px!important;
 }
 #content_wrap .entry #text-under-cover p { 
    font-size: 14px!important;
 }
}

the text-under-cover is th ID for the 2nd Group(20% height)

Regards

[Author]

Posts