April 19, 2016 by Phanor Coll

A few days ago I decided to redesign my blog and portfolio, put it all together under the same roof (Ghost), for those who don’t know about this awesome light cms, click on the previous link.

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.

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.

Go back Home