Support » Theme: Zerif Lite » Responsive background

  • Resolved cyrillefay

    (@cyrillefay)


    Hi there,

    I have added some Css in my child theme editor to give more visibility to my background hompage and verytinh is ok on pc.
    However in mobile, the image is cut and there i a large space with no image (probably due to the height 900).

    http://www.xn--ignici-gxa.com/

    body.custom-background { background-position: center 10px !important;}
    .home .header { height: 900px;}
    body { background-size: 100%;}

    Can you please recomend me how to fix this.
    Thanks in advance.

Viewing 15 replies - 1 through 15 (of 15 total)
  • I have the same issue. On iPhone 5S it’s just plain white: no menu, no logo. This is extremely frustrating. The theme claims to be responsive.

    Never mind my last post: I don’t know what I did, but it’s fixed. The bg is still not responsive, though.

    Thread Starter cyrillefay

    (@cyrillefay)

    Hello there,

    Any ideas please?
    Thanks

    Hello,

    You can try this CSS:

    body.custom-background {
        background-size: 100% 100%;
    }

    Thank You

    Thread Starter cyrillefay

    (@cyrillefay)

    Hello Thanks but it did not work

    Hello,

    Please try this code.

    @media (max-width: 767px){
    body.custom-background {
        background-size: 100% 70%;
    }
    .home .header {
        height: 400px;
    }}

    I hope it will work. If not then don’t remove code from site. Just let me know.

    Thank You.

    Thread Starter cyrillefay

    (@cyrillefay)

    Hello,

    No its still not working.

    Just in case here is all the css I have added to make sure there is no conflict, including your lines.
    Thanks

    .navbar {
    background: #ffffff ;
    border: 0;
    border-radius: 0 !important;
    text-align: left;
    -webkit-box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
    box-shadow: 0px 5px 11px 0px rgba(50, 50, 50, 0.08);
    }

    #main-nav {
    position: fixed;
    width: 100%;
    z-index: 1000;
    min-height: 750px;
    }
    #main-nav.fixed {
    position: fixed !important;
    top: 0;
    }
    .navbar-inverse .navbar-nav >li {
    display: inline;
    margin-right: 20px;
    margin-top: 20px;
    }
    .navbar-inverse .navbar-nav>li:last-child {
    margin-right: 0 !important;
    }
    .navbar-inverse .navbar-nav>li>a {
    color: #000000;
    padding: 0;
    line-height: 35px;
    }
    .navbar-inverse .main-navigation ul > li {
    display: inline;
    margin-right: 20px;
    margin-top: 20px;
    }
    .navbar-inverse .main-navigation > ul > li:last-child {
    margin-right: 0 !important;
    }
    .navbar-inverse .main-navigation > ul > li > a {
    color: #add8e6;
    padding: 0;
    line-height: 35px;
    }
    .navbar-inverse .navbar-nav ul.sub-menu {
    display: none;
    position: absolute; top: 100%;
    background:#fff;
    width:200px;
    box-shadow: 3px 3px 2px rgba(50, 50, 50, 0.08);
    }
    .navbar-inverse .navbar-nav ul.sub-menu {
    margin:0;
    }
    .navbar-inverse .navbar-nav ul.sub-menu ul.sub-menu{
    position: absolute;
    left:100%;
    top:0;
    }
    .navbar-inverse .navbar-nav ul.sub-menu li {
    float: none;
    position: relative;
    list-style:none;
    padding:10px;
    }
    .navbar-inverse .navbar-nav ul.sub-menu li a {
    color:#404040;
    }
    .navbar-inverse .navbar-nav ul.sub-menu li:hover > a {
    color:#e96656;
    }
    .navbar-inverse .navbar-nav li:hover > ul.sub-menu {
    display: block;
    }

    .navbar-brand {
    height: 90px;
    position: relative;
    line-height: 45px;
    }
    .current a {
    color: #e96656 !important;
    position: relative;
    outline: none;
    }
    .current:before {
    position: absolute;
    margin: auto;
    z-index: 1;
    content: “”;
    width: 75%;
    height: 2px;
    background: #e96656;
    bottom: 0px;
    left: 12.5%;
    }
    .navbar-inverse .navbar-nav>li>a:hover {
    color: #e96656;
    outline: none;
    }
    .navbar-toggle {
    border: 0;
    background-color: #808080;
    margin-top: 23px;
    }
    .navbar-inverse .navbar-toggle:hover,.navbar-inverse .navbar-toggle:focus {
    background-color: #e96656;
    filter: alpha(opacity=100);
    opacity: 1;
    box-shadow: none;
    }
    .navbar-toggle.active{
    background-color: #e96656 !important;
    }
    .navbar-toggle.collapsed{
    background-color: #808080 !important;
    }

    —————————–

    body.custom-background { background-position: center 10px !important;}

    .home .header { height: 900px;}

    body { background-size: 100%;}

    ——————————

    .vsg-map iframe { border: 3px solid; }

    contact-form textarea {
    height: 200px;
    }

    .zerif-copyright-box {
    display: none;
    }
    ——————————-

    @media (max-width: 767px){
    body.custom-background {
    background-size: 100% 70%;
    }
    .home .header {
    height: 400px;
    }}

    Hello,

    Please try the given code in the beginning of CSS.
    And also add “Dot” in code
    `contact-form textarea {
    height: 200px;
    }`
    After adding dot it will become

    .contact-form textarea {
    height: 200px;
    }

    Also see screenshot for reference : http://screencast.com/t/ZccfGDqiY
    Thank You

    Hello,

    If provided CSS

    @media (max-width: 767px){
    body.custom-background {
    background-size: 100% 70%;
    }
    .home .header {
    height: 400px;
    }}

    don’t work then use this one

    @media (max-width: 767px){
    body.custom-background {
    background-size: 100% 70%!important;
    }
    .home .header {
    height: 400px!important;
    }}

    Thank You.

    Thread Starter cyrillefay

    (@cyrillefay)

    Thanks a lot for the help.

    Its still not working 100%.

    I have added the following line underneath your second Css code. At least now I see the full image But I am still having this big blank space with my mobile inbetween the image backgrpound and the next section (about us in my case). Either with mobile vertically or horizontaly.

    @media (max-width: 767px){
    body.custom-background {
    background-size: 100% 70%!important;
    }
    .home .header {
    height: 400px!important;
    }}

    @media (max-width: 767px) {
    .navbar-brand > img {
    max-height: 40px;
    }}

    I ahve noticed that if I reduce the height of the header from 700 (as it is currently) to 200, it is almost perfect.
    .home .header { height: 700px;}

    So is there a way to get this code .home .header { height: 700px;} to apply only to pc, excluding mobile?

    Thanks a lot

    Hello,

    You can try this code.

    @media screen and (min-width: 1025px) {
    .home .header { height: 700px;}
    }

    Thank You

    Thread Starter cyrillefay

    (@cyrillefay)

    Hello Thanks again but still no change.

    the following CSS seems to overwrite any code for @media

    body.custom-background { background-position: center 1px !important;}
    .home .header { height: 700px;}
    body { background-size: 100%;}

    From all the code you sent me, even when I change the numbers to ridiculous level, its not changing anything.

    This part in particular is not having any effect:

    .home .header {
    height: 400px!important;

    Thread Starter cyrillefay

    (@cyrillefay)

    Also, the size of my image is 2048×1365.

    Since I have CSS (body { background-size: 100%;}) It works a bit better with a 1080×1080 image on mobile but not on pc

    Hello,

    I am little confused. Please go to your child theme style.css and remove comment lines shown in the screenshot (http://screencast.com/t/hTjxrieS). And share screenshot of problematic area and also let me know in which resolution (viewport) you are getting problem.

    You can share screenshot with the help of http://imgur.com/.

    Thank You.

    Thread Starter cyrillefay

    (@cyrillefay)

    Hello tehre,

    Yes it works.

    First of all I had to delete those lines in my stylce.css as you just adviced. thanks

    And then I used:

    @media (max-width: 767px){
    body.custom-background {
    background-size: 150% !important;
    }
    .home .header {
    height: 375px!important;
    }}

    Many thanks for your patience

Viewing 15 replies - 1 through 15 (of 15 total)
  • The topic ‘Responsive background’ is closed to new replies.