Innovation Cloud - Step 3 - image size


Hi !

My cloud image takes up the whole screen despite the fact that I have deleted the property "width:100%" that goes with my ".main img " selector in the css file.

Here is what I now have in the css file :

/* Media Queries */
@media (max-width: 500px) {
  .header h1 {
    font-size: 50px;
    line-height: 64px;

  .main, .jumbotron {
    padding: 0 30px;

  .main img {

How can I keep the image small wether my screen is full or reduce ?

Thanks for your help !


define small? You could use percentage:

width: 50%;

in conbitation with max-width:

max-width: 200px;

this way, the image will stay small, and still scale a bit on mobile devices, you could even combine this with @media querys


Thanks @stetim94 ! This helps a lot !