Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 13, 2017 at 7:35 am #863758
    siirous

    Hi Kriesi Team,

    I’m using a stretched layout, and when I have minimal content like my under construction homepage, the socket becomes too large. It looks correct when you got to a page with content, but I’d like a way to shrink it so it’s guaranteed uniform across multiple pages.

    I’ve been trying something like so in quick CSS without much success:

    
#socket {
max-height: 20%;
}

    Any suggestion?

    Thanks!

    October 15, 2017 at 11:49 pm #864599
    Basilis

    Hey siirous,

    I see a under construction page, with no sockets inside.
    Can you define which section you are talking about please?

    Best regards,
    Basilis

    October 16, 2017 at 1:18 am #864603
    siirous

    Hi Basilis,

    I could be using the wrong term. I’m looking at the bottom portion with the copyright that is a reddish/wine color. Below the 4 footer columns.

    Thanks!

    October 16, 2017 at 5:15 am #864627
    Nikko

    Hi,

    Go to Enfold > Layout Builder > and check Show element options for developers. Then go to the pages with minimal content, edit it’s section or column (whatever in layout element that you used) edit it and find Custom Css Class then add this css class: short-container then save it.

    Go to Enfold > General Styling and add css code in Quick CSS:

    @media only screen and (min-width:1024px) {
  .short-container {
    min-height: 430px !important;
  }
}

    You can adjust the 430px to any value. Hope this helps :)

    Best regards,
    Nikko

    October 16, 2017 at 6:48 am #864674
    siirous

    Hi Nikko,

    That’s a step in the right direction, but not quite it. When I adjust min-height on these, it looks great on my laptop, but when I look on my desktop with a larger resolution it looks exactly the footer problem in this other thread I just found and linked to at the bottom of the post. Here’s a quick image of what that footer looks like on my monitor so you can get an idea;

    Large Red Footer

    If I push out to 850px the desktop looks much better but the laptop has a lot of extra scrolling involved for no reason now.

    The solution given in the thread below was a sticky footer/socket which I did with the code snippet below. 

    #socket {
  position: fixed;
  bottom: 0;
  width: 100%;
  max-height: 52px;
}
#footer{
position:fixed;
bottom: 52px;
width: 100%;
}

    And that looked great but I still have to use a short container class min height pixel that creates extra scrolling on the laptop, else the red creeps up behind and above the sticky footer widgets like so:

    Red Behind Sticky Footer

    I really need something that is smart/responsive enough to say “user screen is X px, short container class min height = X – header px – socket px – footer px”. Is that possible?

    Here’s the thread I found that show’s a site that has the same problem:

    Enfold Photography – Keep footer at bottom

    October 16, 2017 at 3:47 pm #864857
    Victoria

    Hi siirous,

    Looks much better now, did you get it working or do you still need our help?

    Best regards,
    Victoria

    October 16, 2017 at 4:10 pm #864866
    siirous

    Hi Victoria,

    On a small screen it looks great. But on a larger monitor like my desktop the socket red creeps up past the footer widgets and it looks like this:

    Sticky Footer Monitor

    If I set the min height like Nikko suggested, then my particular desktop monitor looks ok, but smaller screens have a lot of scroll space, and that may not be large enough for a different users monitor if they have a bigger one than me.

    It seems like in the stretched layout, the socket height is the part that is responsive in the theme, is there anyway to give that power to the content containers instead? So the content is the one that stretches and contracts based on the screen size and the socket/footer remain fixed pixels?

    Thanks!

    October 18, 2017 at 4:33 pm #865790
    Victoria

    Hi siirous,

    Well, what I see now, it is the gap between the wrap_all container and the footer, and the html element has the color of burgundy, I changed it to navy for you to see. So the footer/socket do stay at the bottom. There is not much to worry about, unless your pages are going to have only a few lines of text.

    Best regards,
    Victoria

    October 20, 2017 at 5:21 am #866559
    siirous

    Hi Victoria,

    Sorry for the delay in replying. I guess I’ll just leave it as is for now, although I still don’t think it looks very good. If I wind up having a page that has minimal content I can try to figure it out, or I’ll reopen a thread here.

    Thanks.

    October 20, 2017 at 6:06 am #866579
    Nikko

    Hi siirous,

    You can use something like this:
    for laptops

    @media only screen and (min-width:1024px) {
  .short-container {
    min-height: 430px !important;
  }
}

    for desktops:

    @media only screen and (min-width:1600px) {
  .short-container {
    min-height: 600px !important;
  }
}

    You just need to adjust min-height and the min-width (for target screen resolution).

    Best regards,
    Nikko

    October 20, 2017 at 8:07 am #866619
    siirous

    Ahhhh that makes sense. Change the width based on screen size. Thanks, I think that will work.

    Appreciate the support!

    October 20, 2017 at 8:09 am #866621
    Nikko

    Hi,

    You’re welcome, you can add another if to accommodate very large screens.

    Glad we could help and thanks for using Enfold :)

    Best regards,
    Nikko

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