Image size in blog post not responsive

Hello guys,

I am deeply in love with this theme and the support team.

However, I do need your help on 1 issue in which I can't resolve.

Image (media) in my blog post is not responsive. When I resize my browser's window to half of the screen, the image in my blogpost overlap with the side bar. Please refer to the attached image.

Everything else change size accordingly except to the uploaded image.

For your reference: http://arhamzul.com/apa-tu-dns/ 

image


Comments

  • Hey,

    as we see you used this image inside content with standard <img src="" /> html tag. And you forgot about very important class for images if you want them responsive. This class is scale-with-grid so you need to add it for img tag.
  • edited June 2014
    Thanks for quick response.

    Your answer triggered me to find the 'non-standard way' of inserting image in this theme and I discovered 

    [image src="" align="" caption="" link="" link_image="" target="" alt="" border="0" animate=""]

    and it works perfectly as I need it to be. 

    FYI, in the other theme I use (Sahifa), any image inside content will never exceeds the content's box width and will size down automatically without the need to use any shortcode or need to insert additional class into the img tag.

    Therefore, I was expecting BeTheme to have that capability as well since this is a more modern theme I have ever purchased. Or perhaps, I miss something here? 

    I tried your suggestion, putting scale-with-grid into image's class but seem not working. I made a special page for your reference. 


    The 'wp-image-98' image is automatically added by the WP using the standard image (media) insertion. 

    My second question is... how do I remove this 'bleeding' line?

    image

    Looking forward for your reply :)

  • Sorry but as we see, you have added scale-with-grid class and all looks fine now. Just take a look on http://snag.gy/FxfpH.jpg and http://snag.gy/TEqbe.jpg and as you can see all works fine. Image is scaling properly.

    But to remove those lines from sidebar, please use below css:
    .aside_right .widget:after { display: none; }
  • Thanks guys. It works wonderful
Sign In or Register to comment.