CODEWITHSUNDEEP
htmlcss
chunzg
chunzg

Reputation: 175

Media queries / responsive webpage

I am trying to make a responsive webpage with my site here: https://chunzg.github.io/about.html

I have made a flex container for the photo and text.

Have used the media query below to first test on my laptop screen : 

@media only screen 
  and (min-device-width: 300px) 
  and (max-device-width: 600px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
   .sidebar {
    width: 100%;
   }
   .photo {
    width: 100%;
   }
   .text {
    width: 100%;
   }
}

but it doesn't work - nothing changes. I would like the sidebar, photo and text to be stacked vertically on top of one another if I am looking at it on a narrow screen.

I know I must be doing something wrong but just don't have enough experience to know what needs to change

Thanks

Upvotes: 0

Views: 64

Answers (1)

Alp Eren Gül
Alp Eren Gül

Reputation: 103

Hey I am giving a reference:https://www.w3schools.com/css/css3_mediaqueries_ex.asp I couldnt understand the exact question but I think it should be like this:

/* On screens that are 992px wide or less, go from four columns to two columns */
    @media screen and (max-width: 600px) {
   .sidebar {
    width: 100%;
   }
   .photo {
    width: 100%;
   }
   .text {
    width: 100%;
   }
}

In my code I scripts lets webpage to change width by 100 if the screen size is less than 600 or equal to 600.(Maybe it can be usefull for your ipad or small devices screen)

Also why did you used min and max at the same time?

Note that I am not professional but I have had some experiences with css so that my answer maybe could not be the solution. But lets try this.

Upvotes: 2

Related Questions