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.
