Responsive image not responsive :)

Responsive image not responsive :)
0

#1

hi all,

I’ve been working on a basic tribute page (not been using codepen but sublime). I have used this code for an image which is on its own row with id of pic. The column is a col-sm-12.

color portrait of Nikola Tesla

Sadly the image does not scale down when i reduce the size of browser window. Should it now work or have I coded this line wrong? Or maybe could other code be overiding this command. Can post additional code if needed.
Thanks in advance :slight_smile:


#2

color portait of Nikola Tesla


#3

img src=“images/tesla_color.jpg” class=“img-rounded center-block img-responsive” alt=“color portait of Nikola Tesla”/


#4

Since you are using Sublime and not Codepen, are you adding the bootstrap CDN code on the header of the html file? keep in mind that you can do that easily on Codepen with a click but on a plain html file you have to add it to the header.


#5

Hi,

Yes I’ve added all the bootstrap code for CDN.
I’m sure my codes a little messy as I’m creating workarounds each time I come across a problem.


#6

here is the code the code


#7

One of the big advantages of using codepen is that other FCC users can run it and make alterations on the fly. We can only guess. For bootstrap to work properly it needs to have jQuery.js added as well - and it needs to placed just above bootstrap.js (not below). I would try removing the class “center-block”.
Also - row cols inherit the smallest set. If nothing is written the col-xs-12 is the default which means that sm md and so on also will be 12 - so unless you change the smallest setting (col-xs-#) then your it is automatically col-sm-12


#8

Hi Geg,
I’m using codepen now. Thanks for your advice. :+1:t3:
A