Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #881831

    Hi,
    I have an image 120px high for logo
    I set .logo img { top:10px;} to give a white space buffer at top – works perfect
    I set custom height 140px to give 10px white space at bottom

    BUT, When I scroll down, and the image shrinks it’s loses the white space underneath logo – any idea how to fix?
    Thanks so much for any help,
    Best wishes,
    Christopher Sketlon.

    #881923

    Hey kelsangchodor,

    I have checked it and it seems good, can you try to add this css code in Quick CSS (located in Enfold > General Styling), and see if it helps:

    .header-scrolled #header_main .logo img {
        max-height: 40px !important;
        margin-top: 7px;
    }

    Best regards,
    Nikko

    #883680

    Hello!
    This works with scrolling (thanks!!) BUT I still can’t get the spacing to work on mobile and responsive.
    When it is in non-responsive mode – I have a perfect 10px gap top and bottom.
    But when it goes into responsive mode (and on mobiles) it loses the bottom white space padding. On a mobile it’s also not vertically centrally aligned.
    Please can you help – I really appreciate your time,
    best wishes,
    Christopher Skelton

    #884089

    Hi,

    Please try the following CSS as well:

    @media only screen and (max-width: 990px) {
    .logo img {
        top: 0;
        max-height:35px;
    }
    }

    Best regards,
    Rikard

    #884103

    Hi Rikard,
    Thanks for your help!
    This looks OK on mobile (420px wide – but it doesn’t work above that)

    I’m not sure if what I’m asking for is possible with the theme?

    Just to recap: I have a logo that is 110 px high – what I want is a 10px white space above and below this logo. And then when the window is resized it doesn’t lose this space above and below. At the moment it loses this space. Also, when scrolling down I would like this white space to be maintained when the logo shrinks.

    Is this too complicated css? would it be easier for me to include a 10px space top/bottom in the actual .png file iteself?

    best wishes & thanks for your help

    Christopher Skelton

    #885136

    Hi Christopher Skelton,

    It does have 10px above and below on screens above 420. Is that not enough for you?

    Best regards,
    Victoria

    #885175

    Hi Victoria,

    Thanks for your reply.

    But it doesn’t have 10px uniform space above 420. See attached image. If you increase the size of the screen you’ll see the logo space jumps about.

    see attached:
    https://www.dropbox.com/s/6np7zs8hw3425ng/logo.jpg?dl=0

    Also, when it get’s smaller due to scrolling it loses the space and margins jump around.

    Please can you help?

    best,
    Chris

    #885523

    Hi Chris,

    This is the code from Quick css that does that
    Image 2017-12-06 at 12.00.16.png

    You can simply remove it.

    Best regards,
    Victoria

    #885744

    Hi Victoria,

    Thanks for that – but it doesn’t work as you suggest. It’s not that simple I’m afraid!

    I’m not sure if you have read this thread? The code you suggested removing was what your collegue Rikard told me add to solve a problem with the logo losing white space underneath on responsive. So, if I remove the code you suggest it creates another problem.

    Just to clarify again – this is what I’m trying to achieve if it’s possible with the enfold theme and you can offer help:

    I have a logo that is 110 px high – what I want is a 10 px white space above and below this logo. And then when the window is resized it doesn’t lose this space above and below. At the moment it loses this space. Also, when scrolling down (and the logo shrinks in size) I would like this white space to be maintained when the logo shrinks.

    Is this too complicated in css?

    Best wishes,
    Christopher.

    #886498

    Hi Christopher,

    What you’re describing is a normal shrinking header behavior. It works like this out of the box. The code given by Rikard must have been solving another issue, but it interferes with the normal shrinking logo behavior. What was the issue that the code was solving?

    Best regards,
    Victoria

    #886526

    Hi Victoria,
    I think this getting too complicated.
    I fixed the problem by just added the white space into the logo .png file itself and removing all the suggested CSS changes.
    It works perfectly now.
    Thanks for your help,
    Best Wishes,
    Christopher Skelton.

    #886641

    Hi Christopher,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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