Tribute Project Responsiveness

HTML-CSS
1

Can’t get the image to be responsive, rest of page is. Suggestions appreciated. Another thing that may sound stupid. How do I use the cdn to run tests on my projects.

2

Hi again Hassan,

Making a responsive image is nice and straightforward, thankfully.

We need to target the img within the <div #img-div>

Basic CSS tells us that we can use:

img {

}

To target an image in CSS - but this will affect all the attributes of all img tags. Instead, to target only the the img in that div we write this:

#img-box img {
         width: 100%;
         height: auto;
}

You can further increase the ‘style’ by giving the image a max-width parameter to stop it becoming enormous and imbalancing the page, so we’d finish off the CSS like this:

#img-box img {
         width: 100%;
         height: auto;
         max-width: 800px;
}

You can read more on responsive imagery here:

Creating responsive images in CSS

Good luck.

3

Will try that. Thanks.