Header on iPhone isn't responsive


#1

www.natalieandbob.com

My header image doesn’t seem to be displaying responsively on my iPhone 5S and I can’t figure out why.

Here’s a screen shot of what I’m getting on my phone.

What’s the issue here?


#2

Hi guys

I’m having the same issue with my site.
Please advise.

Thanks for a great theme.
F


#3

Hi

sorry for delay. you can try add this code using custom css plugin:

@media only screen(max-width: 992px){
 #header-banner {
   background-size: 200% 100% !important;
 }
}

refers to this css doc http://www.w3schools.com/cssref/css3_pr_background-size.asp you can decrease or increase the procentage of the value of background-size


#4

Hi, this still isn’t working. It looks like it’s getting overidden by .parallax css that’s somewhere?


#5

sorry for the delay,

have you try to decrease or increase the value of background-size?
I’ve tried to change the value to background-size: 100% 75% !important; and it’s work. see this capture http://prntscr.com/7omb6h


#6

Where does this code go? And what is the editor you are using in the screenshot?


#7

@justinpease that was just for simulation, you can do it too by using inspect element from browser


#8

@Awan I know that, I was asking what the simulation tool was. Also, where does the code go?


#9

@justinpease I am using google dev tools. you can use the inspect element from the google dev tools and after you get the code, you can place it using custom css plugin on your theme


#10

I am having the same problem. I have tried the solution Awan suggested but it’s not working. The header is acting responsive when I test in my desktop browser using Google Dev Tools, but it doesn’t work when I try to use in on my Iphone 6 or Ipad 3. I thought it was just my site, but I see the Intro Demo site has the same problem.

Can somebody please help?


#11

Add this simple line of code to your child theme, CSS or Custom CSS plugin:

#header-banner {
    background-size: cover !important;
}

#12

I’ve tried that but it’s still not working. Any other suggestions? The site is http://aislingcircusarts.com/. I’ve had it password protected as it’s not entirely ready but have removed it temporarily so you can see what’s happening.

Thanks!


#13

I also added this bit of code:

@media only screen and (max-width: 768px) {
#header-banner {
    background-size: auto 850px !important;
}
}

Try that as well as making the header background size “cover”.

It is a big issue that this theme does not have a properly responsive background! I hope someone will fix.


#14

@Awan, it’s still not working for me on the live site with any of the code tweaks suggested at www.natalieandbob.com


#15

Hi, sorry for the delay.

can you try this code below?

#header-banner {
    background-attachment: scroll !important;
}

#16

@Awan, that looks like it’s solved the issue. Thank you!