Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • May 6, 2016 at 10:46 pm #628492
    Krilille

    Hi,
    On my website I wanted to have a full size header, so I was recommended to add a CSS code that made the background appear as my header. I now have it exactly as I want it on the desktop, but on any mobile device the header is tiny and not the right size (you are only able to see parts of the header picture/logo).
    How can I get the mobile header to appear in the same way as on a computer?

    May 10, 2016 at 7:59 am #629695
    Ismael

    Hey Krilille,

    Thank you for using Enfold.

    Will you consider removing the header background on mobile view? And then display the actual logo? There’s not enough space to contain an image that large on mobile view. Please replace the following code:

    .responsive .logo img {
    display: none !important;
}

    .. with:

    @media only screen and (min-width: 989px) {
.responsive .logo img {
    display: none!important;
}
}

@media only screen and (max-width: 989px) {
.header_color .header_bg {
    background: #ffffff;
}
}

    The code will hide the actual logo only on desktop view and then remove the logo background on mobile view.

    Best regards,
    Ismael

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