WordPress.org

Ready to get started?Download WordPress

Forums

D5 Business Line
[resolved] Front page banner image - display issue on iPhone (17 posts)

  1. Liamology
    Member
    Posted 1 year ago #

    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!

  2. Madlen
    Member
    Posted 1 year ago #

    Hello,

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

  3. Madlen
    Member
    Posted 1 year ago #

    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?

  4. Liamology
    Member
    Posted 1 year ago #

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

  5. Liamology
    Member
    Posted 1 year ago #

    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!

  6. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    What do you want to happen?

  7. Liamology
    Member
    Posted 1 year ago #

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

  8. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    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?

  9. Liamology
    Member
    Posted 1 year ago #

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

  10. Liamology
    Member
    Posted 1 year ago #

    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;

  11. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    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?

  12. Liamology
    Member
    Posted 1 year ago #

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

  13. Liamology
    Member
    Posted 1 year ago #

    This one is already in the css:

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

  14. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

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

  15. Liamology
    Member
    Posted 1 year ago #

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

  16. Andrew Nevins
    Spam zapper & Volunteer Moderator
    Posted 1 year ago #

    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.

  17. Liamology
    Member
    Posted 1 year ago #

    OK - that makes a lot of sense - thanks for all your help!
    I appreciate it :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic