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

Question

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.

Answer 1

Add a media query

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