Hi, I’m new here on freeCodeCamp and this is also the first time I work with bootstrap. I’m using the free CodePen and have just created my first pen but can’t get it to view correctly on all devices.
First of all I’m not sure how to post the link to my project ‘Tribute Page’ here. That is I simply can’t find where that link is. So let’s start there. Do I simply copy the webbadress shown in my browser?
Feel a bit stupid for asking what must be obvious things…
Yes, that will do it. It will look like:
Here’s the link:
The page looks ok on my laptop, but on iphone the image won’t display at all. Is it too big? If so how do I resize it to look good on laptop and mobile unit?
<img class="thick-black-border image-responsive center-block" src="http://en.espnf1.com/PICTURES/CMS/8300/8387.jpg" />
<img class="thick-black-border img-responsive center-block" src="http://en.espnf1.com/PICTURES/CMS/8300/8387.jpg" />
There is no such class as “image-responsive” in Bootstrap 3. However the “img-responsive” class does what you want.
Ah, didn’t spot that one.
Looks ok on laptop. I can resize the browser and the page and image changes size. Still not working on iphone though. Picture does not show at all on the mobile device…
Try going to https://codepen.io/pawestin/full/yzKWoz/ on your Iphone and tell me if it looks good.
Nope, I’m only seeing the black border as a very small square. No image… hmm strange
I tried to open the image-link on the iphone browser and it displays ok all by itself. Even stranger…
It works now all of a sudden…