Min and max width issues

Issue

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?

Solution

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

Answered By – ImBIOS

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.