Problems with Bootstrap's IMAGE-RESPONSIVE class

A few days ago I decided to redesign my blog and portfolio, put it all together under the same roof (Ghost)

So like I was saying, I wanted to give my website a complete make over, and since i’m a HUGE!! fan of bootstrap, I had to use it, so I downloaded version 3.3.6 and started working on my idea, everything was working fine, our course, this was previous of the testing phase. I published the beta version of my site on a slack group to get some feedback and a few friends pointed out a couple of responsive issues, apparently the posts main image wasn’t acting as a responsive image although it had the class img-responsive applied to it. I opened up my fav ide ATOM and started looking at the code, checking my media queries, but everything was looking fine, so I looked at bootstraps main css file and the specific class, nothing weird was there, so my head started spinning around this issue.

After a couple of minutes testing, creating a separate class for the image(just for testing, which worked by the way) I decided to add a simple line to the img-responsive class. width:100% and eureka!!! it worked, but since I don’t like modifying the main bootstrap css file, I created an img-responsive class in my main css file to overwrite bootstraps’.

I know there are probably a couple of other ways to solve this, but i came up with this simple work around to that issue.

// In your css file
img-responsive {  
    display: block;
    max-width: 100%;
    width: 100%; <--- this line was added
    height: auto;

I have to mention that I’m working on a Kali(debian based pentesting distro) with iceweasel as the main browser, testing in on chrome worked like a charm. I guess I would have to do some in depth testing on windows, mac OS and different browsers.

enjoyed the article?Phanor Collcontact me and lets bring your ideas to life.

Get your copy of "Hands on Gatsbyjs" and learn how to supercharge your websites, embrace JAMStack and add microservices to implement authenticacion, create shopping carts and more. get your copy now

Phanor Coll

Phanor Coll

With more than 20 years of experience, I love to learn every day, hack around and bring crazy ideas to life. Currently immersed in the world of Go(golang), Graph databases(Neo4j, Dgraph) and Rectjs.

Learn more about me..