Tagged: ,

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • July 25, 2013 at 4:36 am #26707
    TylerDrew

    Hi,

    From an iphone browser, please see: http://deborahburst.com/2013/07/a-chance-encounter-in-nyc/ I love the theme, and this seems to be the only issue I’m having. I’m using the wide theme, not the boxed theme setting. Everything behaves correctly in a desktop browser, but on iphones, the images aren’t resizing to fit the browser frame.

    Thanks,

    Tyler

    July 25, 2013 at 5:30 am #131332
    Dude

    I investigated the html code and it seems like you (or wordpress) added a width value to the image code

    <div id="attachment_2705" class="wp-caption aligncenter" style="width: 760px"><a href="http://deborahburst.com/wp-content/uploads/2013/07/website-photos-NYC-hoda-deb.jpg" rel="lightbox[auto_group1]" style="position: relative; overflow: hidden;"><img class="size-full wp-image-2705" alt="Deb and Hoda!" src="http://deborahburst.com/wp-content/uploads/2013/07/website-photos-NYC-hoda-deb.jpg" width="750" height="1000">

    Please remove “style=”width: 760px” and the image will scale properly. Maybe you need to switch to the “HTML” mode of the text editor to find the code.

    July 25, 2013 at 12:11 pm #131333
    TylerDrew

    I removed the photos and re-added them, from then on it worked beautifully, until I added captions to the photo, that’s when the issue occurs.

    July 25, 2013 at 12:50 pm #131334
    Dude

    Hi!

    Did you find the

    style="width: 760px"

    code? If yes please try to remove it and check the results…

    Regards,

    Peter

    July 25, 2013 at 1:37 pm #131335
    TylerDrew

    No, I have not found it, but then again, I am not that familiar with the back end on wordpress.

    July 25, 2013 at 1:56 pm #131336
    TylerDrew

    I found this post, where other responsive theme users were having the same issue: http://wordpress.org/support/topic/captions-break-image-fluidity-in-responsive-themes-on-mobile-phones

    I added this CSS code and it fixed the issue: .wp-caption {

    max-width: 96% !important;

    width: auto !important;

    }

    July 25, 2013 at 1:58 pm #131337
    TylerDrew

    Nevermind, it fixed the issue until you turn the iphone to landscape instead of portrait shape.

    July 25, 2013 at 3:42 pm #131338
    Dude

    Hey!

    Glad you found a solution. Imo it’s still strange that wp adds a width value to the caption…

    Best regards,

    Peter

    July 25, 2013 at 4:43 pm #131339
    Devin

    Hi Tyler,

    I think Peter misunderstood your last comment (or else I did). If it still isn’t working try this:

    .wp-caption {
    
width: auto !important;
    
}

    Regards,

    Devin

    July 25, 2013 at 6:40 pm #131340
    TylerDrew

    That works for portrait orientation on the iphone, but not landscape. I just got this from Kriesi ‏on twitter though:


    @TylerDrew     nice catch. I think there is an easy solution for this, will add it to the next update ;)

    July 25, 2013 at 9:07 pm #131341
    Devin

    It should work for all. I tested it with a few devices (ipad, android phones, iphone emulators) but if Kriesi has something else for it it will get added in regardless.

    Regards,

    Devin

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘images added to blog post aren't responsive on iphone’ is closed to new replies.