CODEWITHSUNDEEP
htmlcssresponsive-designalignmentmedia
Amanda Cox
Amanda Cox

Reputation: 1

Make a DIV tag align center ONLY in responsive mode

I have a header with three columns. 

<div class="thirds">
    <a href="http://www.honey-do-list-services.net"><img src="http://www.honey-do-list-services.net/wp-content/uploads/2013/08/honeydolistlogweb-handyman.png" align="left"></a>
</div>
<div class="thirds">
    <a href="http://www.honey-do-list-services.net/wp-content/uploads/2014/05/CheckAPro-1-Ramsey-4-30-14.mp3" target="_blank"><img src="http://www.honey-do-list-services.net/wp-content/uploads/2014/05/dave-ramsey-endorsement-button-small.png"></a>
</div>
<div class="thirds">
   <a href="http://www.honey-do-list-services.net/contact-us/"><img src ="http://www.honey-do-list-services.net/wp-content/uploads/2015/09/contact_iconsmhandyman.png"; align="right"></a>
</div>

The columns are aligned individually (left, center and right). I need to have ALL of them be centered but only on a small media screen. How can I accomplish this?

Upvotes: 0

Views: 780

Answers (2)

mudit_sen
mudit_sen

Reputation: 1510

For both Portrait and Landscape mode

   @media screen 
      and (device-width: 320px) 
      and (device-height: 640px) 
      and (-webkit-device-pixel-ratio: 2) {

     .thirds{
        width:100%;
        display:block;
        text-align:center;
        vertical-align: center;
      }    
    }

This might work :)

Upvotes: 1

Sean
Sean

Reputation: 427

Media queries are your best bet. Add this to your stylesheet, the min and max attributes can have any value, this is just an example:

@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) 
  {
    div.thirds 
    {
      text-align: center;/* or whatever property you want*/
    }
  }

Really good article here: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Upvotes: 0

Related Questions