Support » Theme: Smart Magazine » Images not responsive

  • Images in mobile view are not responsive at all. Rather the same appear to be squished.

    Please share how to make the images responsive?

Viewing 6 replies - 1 through 6 (of 6 total)
  • to add more,

    The featured image if of larger size, is squished.

    In case of images which are within the articles, they are coming out of the frame.

    Hey tarunbatta !

    try adding the following to your style.css

    img {
       width:100%
    }

    and let me know about the result 🙂

    Cheers !

    Since the author is using bootstrap, I was doing the following in a custom js,
    $(“.featured_image img”).addClass(“img-responsive imageCentering”);
    $(“.entry-content img”).addClass(“img-responsive imageCentering”);
    $(“.entry-content iframe”).wrap(“<div class=’embed-responsive embed-responsive-16by9′></div>”);
    $(“.entry-content video”).wrap(“<div class=’embed-responsive embed-responsive-16by9′></div>”);

    But, I liked your CSS option much better, so added the following changes to the styles,
    .entry-content img {
    width: 100%;
    height: 100%;
    }

    .entry-content iframe {
    width: 100%;
    height: 100%;
    }

    .featured_image img {
    width: 100%;
    height: 100%;
    }

    Thanks.

    Theme Author Qaiser

    (@kais99)

    I would add the css in next update.

    Thanks,
    Qaiser

    This solution has a problem;

    ALL images now span 100% of the width of the text column. I would like to keep the images responsive to prevent them from being larger than the text column, but I do not wish for smaller images to be stretched.

    Can anyone help?

    Theme Author Qaiser

    (@kais99)

    you just need to add below css at the end of style.css file
    .single .featured_image {
    text-align: center;
    }
    .featured_image img{
    height: auto !important;
    max-width:100%;
    }

    Or simply wait for next update which I am going to release this week.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Images not responsive’ is closed to new replies.