Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • October 1, 2019 at 1:43 pm #1143730
    GBT135

    Hello,

    I’m sorry if this has already been answered before but I’ve tried several CSS codes but nothing worked very well…

    I am having an issue with my logo on my website.

    1) the logo is not centered (it’s too “high” compared to other elements of the menu)
    2) the logo is too big.

    I did find some CSS to reduce it’s size and lower it a bit but every time I would shrink the page the logo would suddenly become massive and wouldn’t be centered anymore.

    Do you have any solution/CSS for this problem?

    Thank you advance

    October 1, 2019 at 2:10 pm #1143750
    Victoria

    Hey GBT135,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

    
#top #header .logo img {
    opacity: 1;
    margin-top: 15px;
    width: 90%;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    October 1, 2019 at 2:17 pm #1143751
    GBT135

    Hello Victoria,

    Thank you very much for your prompt response.

    Your code fixes the issue on desktop but now the logo is not aligned on mobile.

    Also, the logo is still doing some weird stuff when I shrink the page (it suddenly becomes massive and not centered)…is there anyway to fix this issue as well?

    Thank you again,
    Sam

    • This reply was modified 5 years, 1 month ago by GBT135.
    October 2, 2019 at 5:56 am #1144051
    Rikard

    Hi Sam,

    Please try this CSS instead:

    @media only screen and (min-width: 768px) {
#top #header .logo img {
    opacity: 1;
    margin-top: 15px;
    width: 90%;
}
}

    I couldn’t reproduce the problems when scrolling on my end using Chrome, could you let us know how to reproduce that please?

    Best regards,
    Rikard

    October 3, 2019 at 10:23 am #1144420
    GBT135

    Hello Rikard,

    Your CSS works very nicely! Thank you guys for your help. The logo is nicely aligned and the size for desktops is perfect.

    The issus I still have is that the logo is still very big on mobile (or gets big when I shrink down the size of the page on Safari or Chrome on my computer).

    When I change the “width” of your CSS, it adapts the size of the logo on desktop but, strangely, not on smaller screens.

    Thank you again,
    Best,
    Sam

    October 4, 2019 at 5:56 am #1144865
    Rikard

    Hi Sam,

    Please try this CSS in order to make the logo smaller on mobile devices:

    @media only screen and (max-width: 767px) {
.responsive .logo img {
    max-width: 80%;
}
}

    Best regards,
    Rikard

    October 5, 2019 at 11:28 am #1145242
    GBT135

    Thank you so much for your help!

    Works just fine!

    Best,

    October 5, 2019 at 4:54 pm #1145320
    Victoria

    Hi GBT135,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

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