Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 26, 2017 at 6:33 am #881831
    kelsangchodor

    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.

    Our Teachers

    November 26, 2017 at 5:04 pm #881923
    Nikko

    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

    December 1, 2017 at 5:17 am #883680
    kelsangchodor

    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

    December 2, 2017 at 7:57 am #884089
    Rikard

    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

    December 2, 2017 at 10:41 am #884103
    kelsangchodor

    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

    • This reply was modified 6 years, 10 months ago by kelsangchodor.
    December 5, 2017 at 4:38 pm #885136
    Victoria

    Hi Christopher Skelton,

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

    Best regards,
    Victoria

    December 5, 2017 at 5:51 pm #885175
    kelsangchodor

    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

    December 6, 2017 at 12:01 pm #885523
    Victoria

    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

    December 6, 2017 at 7:42 pm #885744
    kelsangchodor

    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.

    December 8, 2017 at 2:57 pm #886498
    Victoria

    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

    December 8, 2017 at 4:00 pm #886526
    kelsangchodor

    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.

    December 8, 2017 at 9:50 pm #886641
    Victoria

    Hi Christopher,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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