Innovation Cloud - Step 3 - image size


#1

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 {
    float:left;
  }

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

Thanks for your help !


#2

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


#3

Thanks @stetim94 ! This helps a lot !