Responsive Image Question

Mar 18, 2014 at 7:31 PM
I'm using the master/styles in this project for the first time, so allow me to first just thank the folks who put this together, because it's already saved me a ton of time and effort.

Now onto the question. I set up a test site using the installation instruction provided in the download. That all worked very smoothly, and the image at the top of the page resized correctly when I looked at the site in the different responsive view modes. I then applied the master/styles to a project of my own.

Now when I add images to the content of that site, they won't respond to the different screen size. I did some searching on this, but didn't find much beyond the fact that twitter bootstrap requires the "img-responsive" class to be put on the img tag. Tried this and didn't have any luck either. But I noticed this class was not on the img in the test site that works correctly. The only piece of pertinent info is that I'm not using one of the page layouts that came with in the download, I'm just using "Body Only".

Am I missing something here from a newbie perspective? Any info would be much appreciated. And again, thanks so much for putting this thing together.
Mar 19, 2014 at 3:52 PM
I am also having an issue where images that have been placed in a content editor webpart are not responding to the screen size. Also, the calendar webpart is not responding while the rest of the and webparts including other content editors are.

As stated above any info given would be very much appreciated. Thank you for all of the work you guys have put into this project as well.
Mar 19, 2014 at 4:57 PM
Edited Mar 19, 2014 at 4:58 PM
Hi guys,

I had the same problem. When I changed the CSS to get the image responsive, SharePoint will have a lot of problems showing e.g. arrows, icons etc.
img {
 max-width:100%;
 width:100%;
}
So now I use this solution where I need it e.g. news item images
.newsarticle img {
 max-width:100%;
 width:100%;
}
Good luck!