Pls i need assistance am finding it difficult in using media queries responsively my website looks gud on my laptop but on my mobile phone it looks awful

HTML-CSS
1 
@media (max-width: 700px) {
  body{
    width: 100px;
  }
  
  img{
    width: 250px;
    bottom: 0px;
  }  
  
  #explain{
    width: 100px;
   
}
2

Some notes to help with responsiveness;

  • Do not use fixed dimensions on elements, use max-width/height and relative units like %, em, rem and vw to keep everything responsive.
  • Start by styling for a narrow view port first. Narrow your browser as far as it will go and style the page so it looks good at that narrow width. Then gradually widen your browser and use CSS media query break points to adjust the style for wider view ports if needed.
3

please help me with examples :sweat: please am still confused :pray:

4

In your media query you have;

@media (max-width: 700px) {
  body{
    width: 100px;
  }

My one point was " * Do not use fixed dimensions on elements, use max-width/height and relative units like %, em, rem and vw to keep everything responsive."

A pixel is a fixed dimension. You’re saying that the body should have a width of 100px no matter if the screen is 700px or 400px.
If you used a percentage instead of a fixed pixel width the body would resize responsively.

Have you tried searching with something like css resize responsively? Is there something specific that you don’t understand?

Edit:
Something else you can do to help you to better see how you have your elements laid out. Add the following property: value; pair to your elements;
border: solid 1px red;
Maybe use red for the body selector and green for the explain selector.
See what it looks like on normal view then narrow your browser width to see what happens when it below 700px (that’s what your media query is set to).

Hope that helps.

5

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