0

I used the @media (min-width:320px) and noticed my design from mobile scaling back to desktop had inherited my mobile design. changed to max-width and my desktop design was restored but only this time my mobile design is all messed up again like it was before I made all of my adjustments using the @media (min-width:320px) what am I doing wrong?

Temani Afif
  • 245,468
  • 26
  • 309
  • 415
Fredrick
  • 3
  • 2
  • 1
    Without seeing a basic example we can't say anything. I guess its because of mismatch between `min-width` and `max-width`. Please post media queries that you use. – prosach Apr 27 '22 at 03:54
  • You need to add up some code details so others could better imagine and debug your code better. Also, I found your explanation of what is the issue, what are you doing, and what are you wanted it to be is not well described. Please fix it to help others to find out the best answer for you. – ImBIOS Apr 27 '22 at 03:59

1 Answers1

1

I think you need to read more and understand better these 3 things to find out what you need. Media queries are a popular technique for delivering a tailored style sheet to different devices (from: https://www.w3schools.com/css/css3_mediaqueries_ex.asp).

max-width

The max-width property defines the maximum width of an element.

If the content is larger than the maximum width, it will automatically change the height of the element.

If the content is smaller than the maximum width, the max-width property has no effect.

Note: This prevents the value of the width property from becoming larger than max-width. The value of the max-width property overrides the width property.

Further read: https://www.w3schools.com/cssref/pr_dim_max-width.asp

min-width

The min-width property defines the minimum width of an element.

If the content is smaller than the minimum width, the minimum width will be applied.

If the content is larger than the minimum width, the min-width property has no effect.

Note: This prevents the value of the width property from becoming smaller than the min-width.

Further read: https://www.w3schools.com/cssref/pr_dim_min-width.asp

Best Practice

Of course by changing min-width to max-width in media queries, or vice versa. It would change the layout it should be. We need to be more persistent on what we need the media query to handle the style. We should decide, only use min-width, or only use max-width. Don't use both or the frontend developer will be going insane on something hard to solve when the frontend styling bug comes.

Useful Link(s)

Max-Width vs. Min-Width

ImBIOS
  • 630
  • 1
  • 9
  • 24