Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #340301

    Is there a way to remove a custom background image when viewing mobile. I have tried to find the style using Google Developer Tools but can’t seem to find the right one. Here is a link to the site. When viewed in Google on the android and apple platforms, the background image I have is showing up behind the logo and my client wants it removed.

    Thanks in advance.

    #340304

    Hi CORMarketing!

    Please add following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 768px) {
    .header_bg { display: none !important; }}

    If that does not work, please post the link to your website

    Regards,
    Yigit

    #340349
    This reply has been marked as private.
    #340816

    Hey!

    Please add following code to Quick CSS as well

    @media only screen and (max-width: 768px) {
    div#header_main {
    background-color: white;
    }}

    Best regards,
    Yigit

    #754453

    Yigit,

    Thanks that was very helpful.
    I took your code, but subbed in an alternative background image instead of a color and for some reason the new background image isn’t taking up the full header container height so the main header image is still visible below it for the bottom 30px or so

    code for different background image on mobile

    @media only screen and (max-width: 480px) {
    div#header_main {
    background-image: url(https://www.FFFFFFFFFFF.com/wp-content/uploads/2017/03/home-header-mobile.jpg); height: 131px !important;
    }}

    Along with this to set the header container size on mobile/tablet

    @media only screen and (max-width: 768px) {
    #header_main .container {
      max-height: 131px;
    }
    #header_main {
      height: 80px;
    }
    .responsive .logo img {
      max-height: 80px;
    }
    .responsive .logo a { vertical-align: top; }}
    
    @media only screen and (max-width: 768px) {
    #header { max-height: 131px !important; }}

    even if i use an alternative color like background-color: black; it still doesn’t fill the entire container leaving the main background image visible

    Thanks
    Jon

    #754553

    Hi,

    Please change your code to following one

    
    @media only screen and (max-width: 480px) {
    .responsive #top .header_bg {
        background-image: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png);
        background-repeat: no-repeat;
        background-size: cover;
    }}

    Best regards,
    Yigit

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.