Home Forums SEA WordPress Theme Group 100% Height Screen with 2 Elements

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #22958
    manuuug
    Participant
    Purchased
    Supported

    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!!

    #22959
    SeaTheme
    Keymaster
    Purchased
    Expired

    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.netTwitterFacebook

    #22962
    manuuug
    Participant
    Purchased
    Supported

    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!

    #22969
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

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

    Regards!

    #22997
    manuuug
    Participant
    Purchased
    Supported

    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?

    #23008
    SeaTheme
    Keymaster
    Purchased
    Expired

    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

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!