Search code examples
cssmedia-queriesbreakpoints

Media Query styles not working

For some reason .headPhone is staying to the right when i resize my browser or view the pageon a mobile. I want to take the float off or add some margin so it centers on a smaller display. How can i achieve this?

HTML

<div class="headDiv">
    <div class="headPhone">
        <p class="fa fa-phone fa-xlg">000000</p>
    </div>
</div><!--headDiv-->

CSS

.headDiv {display:block; max-width:100%;}
.headPhone {float:right;}

@media (max-width: 768px) {
   .headDiv .headPhone {float:none; margin: 0 auto;}
}
Solution

  • You could use display:table so the div will shrink to fit the content automatically.

    http://jsfiddle.net/Lb7ky6vL/

    @media (max-width: 768px) {
    .headDiv .headPhone {
        float: none;
        display: table;
        margin: 0 auto;
    }
}