-
AuthorPosts
-
November 26, 2017 at 6:33 am #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 bottomBUT, 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.November 26, 2017 at 5:04 pm #881923Hey 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,
NikkoDecember 1, 2017 at 5:17 am #883680Hello!
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 SkeltonDecember 2, 2017 at 7:57 am #884089Hi,
Please try the following CSS as well:
@media only screen and (max-width: 990px) { .logo img { top: 0; max-height:35px; } }
Best regards,
RikardDecember 2, 2017 at 10:41 am #884103Hi 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 7 years ago by kelsangchodor.
December 5, 2017 at 4:38 pm #885136Hi Christopher Skelton,
It does have 10px above and below on screens above 420. Is that not enough for you?
Best regards,
VictoriaDecember 5, 2017 at 5:51 pm #885175Hi 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=0Also, when it get’s smaller due to scrolling it loses the space and margins jump around.
Please can you help?
best,
ChrisDecember 6, 2017 at 12:01 pm #885523December 6, 2017 at 7:42 pm #885744Hi 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 #886498Hi 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,
VictoriaDecember 8, 2017 at 4:00 pm #886526Hi 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 #886641Hi Christopher,
Glad you got it working for you! :)
If you need further assistance please let us know.
Best regards,
Victoria -
AuthorPosts
- You must be logged in to reply to this topic.