Using a percentage margin in CSS but want a minimum margin in pixels?
The true solution here is to use a media query break-point to determine when 33% no longer works for you and should be overridden by the minimum margin in pixels.
/*Margin by percentage:*/
div{
margin: 0 33% 0 0;
}
/*Margin by pixel:*/
@media screen and ( max-width: 200px ){
div{
margin: 0 15px 0 0;
}
}
In the above code, change the max-width
to whatever screen width the 33% right margin no longer works for you.
you can try this
.mm:before {
content: "";
display: inline-block;
width: 33%;
min-width: 200px;
}
Place a div
with a % width
and a static min-width
to the right of your element.
<div style="position:relative; float:left; margin:0">
<div style="position:relative; float:left; width:33%; min-width:200px">