Tagged: , , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 23, 2014 at 7:30 pm #340301
    CORMarketing

    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.

    October 23, 2014 at 7:42 pm #340304
    Yigit

    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

    October 23, 2014 at 9:17 pm #340349
    CORMarketing
    This reply has been marked as private.
    October 24, 2014 at 11:01 pm #340816
    Yigit

    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

    March 2, 2017 at 6:32 pm #754453
    millertimesites

    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

    March 2, 2017 at 8:45 pm #754553
    Yigit

    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

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