Front page banner image – display issue on iPhone

Hello,

I have exactly the same problem….!! Do you have an answer already?
Madlen

I just read, that the problem is the free version…. The extended and pro version don′t have this problem… but where can I buy those Versions without becoming a member??

Does anyone have an answer?

Hi Madlen – thanks for your reply.
I’m hoping an admin will answer this one soon.
Everything works perfectly on the iphone except the front page banner and I’m sure it’s just a line of code that needs modifying – if someone could help out that would be great – thanks in advance ??

It’s an issue concerning the css code for the positioning of banner i.e. “position:absolute” that causes issues when displaying on an iphone.
I tried replacing the “absolute” with “relative” but this does not work…
Coud someone please tell me a css workaround for this?
Cheers!

What do you want to happen?

Hi Andrew,
Well actually on my site (https://www.liamgall.com) the banner is a slider.
When I put in the css code “position:relative” the initial banner comes up in the right position, but banner 2 fades in much lower on the page…
If you have a moment, I can show you “live” by demonstrating both ??

Wait, I just want to establish this issue;

the image is only about a third of its normal width

So, what are you expecting it to be, what width?

it’s full width,1050px,which is how it appears on a pc browser

Here’s the code in question:

#slide img {
border: 1px solid #C9C5C5;
box-shadow: 0 -1px 5px 0 #E0E0E0;
height: 400px;
width: 1050px;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
position: absolute;

That may be the CSS applied to the image in the slider, but that theme applies a general image style.

That general style tells all images to resize to the browser’s resolution;

img {
 max-width: 100%;
}

So, have you tried CSS like;

#slide img {
 max-width: none;
}

To override it?

Do you know where to put this CSS other than the theme’s stylesheet?

I haven’t tried that… No, I’m afraid I don’t know where I should put it apart from in the style.css

This one is already in the css:

img {
max-width: 100%;
border: 0 none;
}

Download & install this Custom CSS Manager plugin and put your CSS modifications within its section of the dashboard.

I made the change that you suggested (max-width: none) in the css and it worked !!!

Thanks a million Andrew ??

Do I still need to make that change elsewhere (i.e. download the plugin you suggest)?

You need to move your CSS modifications out of the theme’s files and into a Child Theme stylesheet or a plugin that provides Custom CSS functionality.

Otherwise;
– You cannot update your theme because you’ll lose your CSS,
– Debugging becomes more difficult because you cannot easily differentiate between the theme’s original CSS and your own CSS,
– There’s more chance that your CSS will not work due to CSS Specificity.