WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Image re-sizing in responsive theme (21 posts)

  1. stigbratvold
    Member
    Posted 1 year ago #

    Hi I am using a responsive site and there is a problem occurring when viewing the site on an iPhone the images in post do now want to re-size. Instead it flows out of the screen to the right.

    But when I add a caption to the image it re-sizes with the screen. Does anyone know why and if it is possible to have the same re-sizing on the images without captions?

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    If it's an <img> tag, use the CSS;

    max-width: 100%;

    If it's a background image, use the CSS;

    background-size: 100%;
  3. stigbratvold
    Member
    Posted 1 year ago #

    Thanks for the reply Andrew. So I added this to the CSS

    img {
       max-width: 100%;
    }

    It worked but only problem is that it doesn't keep the proportions. It stretches the image.

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    Can you post the webpage with this issue?

  5. stigbratvold
    Member
    Posted 1 year ago #

    yeah sorry I forgot that…
    http://www.spetakkel.org/

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Which images are resizing without correct dimensions?

  7. stigbratvold
    Member
    Posted 1 year ago #

    All the blog posts… If you check this one out for example
    http://www.spetakkel.org/ung-og-lovende-4/

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    What if you add a 100% height to it as well?

  9. stigbratvold
    Member
    Posted 1 year ago #

    I tried adding this but there is still no difference…

    img {
       max-width: 100%;
       max-height: 100%;
    }
  10. Andrew
    Forum Moderator
    Posted 1 year ago #

    What about height: 100%;

    img {
       max-width: 100%;
       height: 100%;
    }
  11. stigbratvold
    Member
    Posted 1 year ago #

    It re-sizes the Spetakkel logo on top with the right proportions but for some reason it doesn't work on the images in the posts…

  12. Andrew
    Forum Moderator
    Posted 1 year ago #

    You probably want to narrow down the selectors then, E.g;

    .hentry img {
       max-width: 100%;
       height: 100%;
    }
  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    Remember to clear your browser's cache if you want to see instantaneous CSS changes.

  14. stigbratvold
    Member
    Posted 1 year ago #

    Yeah I just cleared it.

    So now I added this css

    .hentry img {
       max-width: 100%;
       height: 100%;
    }

    It works for the images in the post but the logo on top is not effected by it anymore…

  15. Andrew
    Forum Moderator
    Posted 1 year ago #

    Oh I thought you didn't want the logo affected, you can remove that .hentry bit and revert back to just using img .

  16. stigbratvold
    Member
    Posted 1 year ago #

    So now I targeted the logo alone using this code as well as the previous code..

    #logo img {
       max-width: 100%;
    }

    This works exactly as I wanted but I don't know if it is adding more code than necessarily?

  17. Andrew
    Forum Moderator
    Posted 1 year ago #

    Don't worry about adding more code than absolutely necessary, as long as you're not duplicating code.

  18. stigbratvold
    Member
    Posted 1 year ago #

    Allright sweet! Thanks a lot for the help Andrew :)

  19. stigbratvold
    Member
    Posted 1 year ago #

    Or one last question if it is okay…
    When I embed videos using <iframe> is there a way of making that responsive/adaptive as well?

  20. Andrew
    Forum Moderator
    Posted 1 year ago #

    Depends on the content you put into the iFrame. If it's an advert, then no.

  21. stigbratvold
    Member
    Posted 1 year ago #

    No I am thinking about youtube and vimeo videos.
    But I just added this and it worked :) Thanks again…

    .hentry iframe {
       max-width: 100%;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic