0

My website built with Bootstrap 3.3.5 contains images that I want to be responsive, so I assigned the .img-responsive class to them. However, they are not responsive in Firefox (when I resize the window to a smaller size, the image does not get smaller, so that scroll bars appear). In Internet Explorer, it works just fine. I haven't tried any other browser I read about the bug that can be fixed by adding "width: 100%;" but that doesn't fix the problem for me (the only thing it does is make the image bigger when I make the window smaller so that the column containing it is the only one in that row. It gets smaller again as I continue to make the window smaller, but when it's at the size I want it for larger screen, the scroll bars appear again. I tried adding "width: 100%;" inline to the html tag, and I tried adding it to my CSS. I also tried adding "display: block;" "max-width: 100%;" and "height: auto;" as well, but that didn't change anything. Adding !important didn't help either. I don't know what else to try!

Here's my code for the image (only for this column in the row):

<div class="col-sm-4 nopadding">                           
   <a href="index.html"><img src="images/logo6.png" class="img-responsive logoplacement center-block" alt="Logo"></a>
</div>

And the CSS:

.logoplacement {
padding-bottom: 20px;
padding-top: 20px;
padding-left: 35px;
vertical-align: middle; 
}    

.logoplacement img {
display: block;
max-width: 100%;
width: 100%;
height: auto;
}

What can I do?

UPDATE:

The media query:

@media (max-width: 780px) {
 .logoplacement img{
  max-width:80% !important;
  }
}
user3504783
  • 93
  • 1
  • 2
  • 17
  • remove display block property and try? – Avijit Kumar Mar 16 '16 at 18:07
  • Oh great! That does help! It gets smaller now, though there's still some scrolling to do, but I think that must some padding issue. I'll look into it. Now the image becomes huge though when the window is so small that the column takes the whole width of the window. How can I prevent that? Can I tell it not to get bigger than a certain size on smaller screens? – user3504783 Mar 16 '16 at 18:16
  • The image is also bigger (on larger screens) than I want it when the page is online. When it's just on my computer, it's the size I want it. How's that possible? – user3504783 Mar 16 '16 at 18:51
  • remove 100% width property, just keep max width property. It will make the image grow to its actual size, not more than that – Avijit Kumar Mar 16 '16 at 18:53
  • That works! Thank you so much! Is there any way to make the image smaller on small screens? (I mean even smaller than it gets automatically) I've tried using media queries, but I can't get them to work... – user3504783 Mar 16 '16 at 20:14
  • yes you can. let me summarize everything as an answer for you – Avijit Kumar Mar 16 '16 at 20:18
  • It stopped working! :-( I'm not sure how it happened. I had played around with the padding issue, then tried using media queries, and suddenly it lost some of its responsiveness. It still works fine until the window becomes smaller than the image, which is when the scroll bars suddenly appear again. All media queries were deleted, so I have no idea how this is suddenly happening! :-( It's still fine in IE. What am I doing wrong?? – user3504783 Mar 16 '16 at 20:40
  • can u share more of your CSS and respective media queries? – Avijit Kumar Mar 16 '16 at 20:42
  • Never mind... I restarted Firefox, and it's working again... must have been a cache issue or something like that. – user3504783 Mar 16 '16 at 20:49

1 Answers1

1

to make image responsive on firefox, just remove the display block property

to make an image not scale more than it's actual width, just remove 100% width property, just keep max width property. It will make the image grow to its actual size, not more than that.

for making image smaller (even smaller than it gets automatically),put the following CSS inside your media query.

img {
  max-width: 80%;
}

Update your media query to 

@media (max-width: 780px) {
  .logoplacement {
    max-width: 80% !important;
  }
}

your img has logoplacement class, and the way you are applying the CSS is like there is a parent class called as logoplacement and img is inside it, which was incorrect

Avijit Kumar
  • 538
  • 2
  • 9