Tagged: ,

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 14, 2016 at 11:09 am #711861
    realit-treuhand

    Hi guys,
    I use a logo above the layerslider in the header which is displayed fine on PC, meaning it’s vertical centered and has some padding on top and bottom of the logo. However, on mobile there’s no space between the logo and the header Image, that’s why I use following code in quick css:

    @media only screen and (max-width: 768px) {
    .responsive #top .logo img {
    margin: auto;
    }}
    .responsive #top .logo img {
    margin: auto;
    vertical-align: centered;
    }
    .responsive #top .logo {
    width: 100%!important;
    height: 80%!important;
    margin-bottom: 5px;
    margin-top: 5px;
    }

    Now everything works fine, except that “margin-top” is black instead of white (screen shot: http://am-widmipark.ch/wp-content/uploads/2016/11/enfold-support-printsc.jpg) . Do you have any solution to this or maybe a different approach?

    Best regards,
    Michel

    November 15, 2016 at 1:06 am #712246
    Yigit

    Hey Michel,

    Can you please create a temporary admin login and post it here privately? Maintenance mode seems to be active :)

    Best regards,
    Yigit

    November 21, 2016 at 9:05 am #714708
    realit-treuhand

    Hey Yigit,

    sure, see details below.

    Best regards,
    Michel

    November 23, 2016 at 5:40 am #715710
    Ismael

    Hi,

    We added the following css code in the Quick CSS field.

    @media only screen and (max-width: 767px) {
.responsive #top {
    margin-top: -5px;
}
}

    Best regards,
    Ismael

    November 28, 2016 at 9:19 am #717626
    realit-treuhand

    Thanks, Ismael. It looks better now but it also reduces the height of the logo area, which means there is almost no margin bettween the logo and the very top of the site.

    margin-top: 5px; would be just fine, if it wouldn’t be black. Any ideas how to optimize it on mobile?

    Best regards,
    Michel

    November 30, 2016 at 6:49 am #718640
    Ismael

    Hi,

    Adjust the background color of the #wrap_all container.

    #wrap_all {
    background-color: #ffffff;
}

    Best regards,
    Ismael

    January 3, 2017 at 10:34 am #728895
    realit-treuhand

    Hi Ismael,

    unfortunatley this didn’t solve the issue but I figured out that the black background – when setting a positive margin-top – comes from the socket background. E.g. when I zoom in on my iphone and move the site left and right, the background is black as the socket.

    Do you have any ideas to change this without changing the socket color?

    Best regards,
    Michel

    January 3, 2017 at 12:13 pm #728940
    Andy

    Hi,

    not sure what you mean. Are you talking about your black background of your socket? how do you want to change it’s color without changing the socket’s color? or what exactly do you want to achieve?

    With this code inside Quick CSS field you can change socket’s background color:

    #socket {
background: transparent;
}

    Adjust it as needed.

    Best regards,
    Andy

    January 3, 2017 at 4:45 pm #729057
    realit-treuhand

    The thing is, if I put

    @media only screen and (max-width: 767px) {
    .responsive #top {
    margin-top: 5px;
    vertical-align: centered !important;
    }}

    into quick css, it looks like this on mobile screenshot and even after adding

    #wrap_all {
    background-color: #ffffff;
    }

    it’s still black. If I set a header height for mobile only and vertically center the logo, same thing happens. I just can’t get the background white or transparent. I thought that the socket background could have something to do with the background color of the whole website (e.g. on another website of mine, where to socket background is grey, the background of the whole website is grey as well).

    Long story short, I want some (white) top margin to prevent the logo from sticking all the way on top.

    Thanks for your support and best regards,
    Michel

    January 4, 2017 at 8:01 am #729321
    Ismael

    Hi,

    We added the following css code in the Quick CSS field.

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .av-logo-container {
    padding-top: 10px;
}

.responsive #top #wrap_all #header {
    padding-bottom: 20px;
}
}

    Please remove browser cache or hard refresh before checking the page.

    Best regards,
    Ismael

    January 16, 2017 at 11:50 am #733983
    realit-treuhand

    Hi guys,

    now it looks as wished. Problem solved, thanks a lot!

    Cheers,
    Michel

    January 16, 2017 at 4:52 pm #734190
    Andy

    Hi,

    Glad we could help!
    We really appreciate it if you rate our theme on themeforest https://themeforest.net/downloads
    To know more about enfold features please check – http://kriesi.at/documentation/enfold/
    Thank you for using Enfold :)

    Best regards,
    Andy

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Margin Top Padding above Logo’ is closed to new replies.