Media queries

HTML & CSS
1

Hi guys
please am having trouble understanding media quires and how it works.
please can someone help me

2

What specifically do you not understand about them?

4

when i try putting them on my project it does not work`

body{
  background: linear-gradient(#141e30, #243b55);
  transition: 1s 32s ease-in-out;
}
body:hover{
  transform: scale(1.3);
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  background: linear-gradient(#4568dc, #b06ab3);
 
}
.header{
  font-family: Tahoma;
  text-align: center;
  text-transform: uppercase;
  color: white;
  background: linear-gradient(#bdc3c7, #2c3e50);
  width: 50%;
  margin: 10px auto;
  line-height: 70px;
  transition: .3 ease;
}
.header:hover{
  transform: scale(1.3);
  -webkit-transform: scale(1.3);
  -ms-transform: scale(1.3);
  background: linear-gradient(#36d1dc, #5b86e5);
  color: black;
}
*{
  box-sizing: border-box;
}
.image{
  max-width: 70%;
  height: 200px;
  padding: 0px;
  margin: 10px 30px  0px 50px;
  border-radius: 30px;
  border: 1px solid red;
  transition: .1 ease-in-out;
}
.image:hover{
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
}


.column{
  float: left;
  width: 33.33%;
  padding: 9px;
}
.row::after{
  content: "";
  display: table;
  clear: both;
}

    .header{
  font-family: Tahoma;
  text-align: center;
  text-transform: uppercase;
  color: white;
  background: linear-gradient(#bdc3c7, #2c3e50);
  width: 50%;
  margin: 10px auto;
  font-size: 16px;
}  


  }
}
@media screen and (max-width: 600px) {
   body {
     background-color: blue;

that is the css code but it does not affect it when i reduce the size to 600px
you can look at the code and enlighten me on what to do
Flexboxphotogallery

5

If you use CSS Flexbox you will probably not need media queries. Here demonstrated in cut-down version for clarity:

1 Like
8

but when i use my phone to look at the project i can’t see the picture, i only see the border line

9

I can see the photos on my phone (after uploading to a server). I wonder if your phone is blocking images from other domains.

As some photos would overflow on narrow smartphone screens, I have updated the CodePen above to define image width to be 320px instead of specifying height. I have also introduced align-self: center;

1 Like
10

In the css you posted on the thread you have two stray brackets before the 600px media query and in the codepen you have one less bracket than you need as it doesn’t close the min max media query before you start the 600px media query. That means both version are wrong.

Run your code through the css validator every time you make a few changes to avoid typos like this.

Also make sure the viewport meta tag is in place or media queries will not work at the prescribed dimensions.

Note you can’t really just squash images like that as it will break the aspect ratio but I guess that’s a question for another day :slight_smile:

Study the code from @Archibald :slight_smile:

Yes I can see tall squashed images on my iPhone also. :slight_smile:

1 Like
11

8 posts were split to a new topic: Flex shrink behaviour on images and content

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.