Support » Theme: D5 Business Line » Front page banner image – display issue on iPhone

  • Resolved Liamology

    (@liamology)


    Hi there,
    I have installed this theme on my site and it’s really cool – thanks!!
    The only problem I have come accross is the display of the front page banner image on an iphone.
    It appears perfectly on every other browser that I have tried (even safari on windows) but on the iphone (safari of course) the image is only about a third of its normal width…
    Any ideas how I can correct this in the code? This is important to me as I will be offering mp3 downloads to mobile phones so I really need the iphone display to work correctly.
    My site is liamgall.com.
    Here’s a link to how the front page looks on my iphone: http://www.liamgall.com/images/banner_issue.png

    Thanks in advance!

Viewing 15 replies - 1 through 15 (of 16 total)
  • 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!

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    What do you want to happen?

    Hi Andrew,
    Well actually on my site (http://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 ??

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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;

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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;
    }

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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)?

    Moderator Andrew Nevins

    (@anevins)

    Forum moderator

    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.

Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Front page banner image – display issue on iPhone’ is closed to new replies.