Responsive background

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.

Hello there,

Any ideas please?
Thanks

Hello,

You can try this CSS:

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

Thank You

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.

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 : https://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.

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

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;

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 (https://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 https://imgur.com/.

Thank You.

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