Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #14056

    I realized that my responsive css to reduce the size of the image on small screens like the iPhone was too small. So I’ve tried changing the media queries for that size. It seems to work when I reduce the size of my computer’s viewport but not when I look at it on the iPhone itself.

    Example: look at http://outtacontext.com/wp2/about/test on an iPhone in portrait mode.

    My css for the image is on this page is:

    @media only screen and (max-width: 479px) {
    #past_background div.image_center {width: 150%; margin-top: 55%;}
    #past_background img {max-width: 150%;}
    }

    (I also used these styles for the next size up: @media only screen and (min-width: 480px) and (max-width: 767px))

    I’ve cleared the cache of my iPhone’s Safari but it doesn’t change. It still looks like it did when I had no media queries styles for this size and the next size up.

    Then I added this meta-tag to the template:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

    This up’d the size alright but I am not sure what I’m doing now is proper CSS or not. So I’m getting lost. Can you help? I will take the meta-tag off so you can see what it looks like.

    #81904

    I just read through some of the other support questions and from that I realized there is a similar meta-tag in the head.php:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    The only difference between the attribute I added to this special template and the one you have in the header.php is this attribute: “user-scalable=0″

    I guess I just need some help figuring all this out. Thanks.

    #81905

    Hello,

    Is the site on the link that you provided made from Sentence theme?

    What images exactly are you trying to change?

    Regards,

    Ismael

    #81906

    Yes, it’s the Sentence theme I’m using. I just created another template for this section of the site.

    In the example I gave above, the image is that of an old movie actress, Theda Berra.

    When I followed the directions you guys gave me for resizing images I applied that styling and, basically, it worked just as it should except that the images (and text) are now so small when viewed on the iPhone that you can’t read them or see the image very well.

    So, I am looking for a CSS solution to upsize the images and text properly for smaller viewport settings. As you see from the CSS I provided, I have a couple of styles that should take care of it.

    I am also trying to make sure that as the viewport gets smaller the image and text remain in the center of the screen.

    #81907

    Hi outtacontext,

    There is a bit more to adjusting images for mobile viewing that just the adjusting the img size/% with media queries. Unfortunately, even though you are using the Sentence theme and the associated styles, the actual page is a custom template and there could be a number of variables that we can’t be sure of causing conflicts.

    This is really more of a job for a freelance developer or perhaps checking with something like stackoverflow for general bug fixes and questions.

    Regards,

    Devin

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Increasing the size of image for iPhone and iPad sizes’ is closed to new replies.