CSS: how to set a min-width that is overridden by a max-width?

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



CSS: how to set a min-width that is overridden by a max-width?



From this question, I know min-width has precedence over max-width.



My question is how do I achieve the following:



I want a div to be 50% width, but no less than 350px width, unless the view port width is less than 350px, in which case I want the max-width to be 100%.



If I use the following:


.half-right width: 50%; float: right; padding: 2em 4em; min-width: 300px; max-width: 100%;



the min-width overrides the max-width, and there is some bleeding outside 100% of the width.



Help appreciated.





Use a media query
– spectras
Aug 6 at 1:19




1 Answer
1



Add a media query


@media screen and (max-width: 350px)
.half-right
width: 100%;







By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Dynamically update html content plain JS

How to determine optimal route across keyboard