Right Justify Header Contact Info on Mobiles

Hello, when viewing the header phone, contact, search on a mobile, it justifies on the left hand side. How can I justify that to the right? Thanks for any help!

http://celibre.com/

Comments

  • Hi

    Add this css rule in theme css box 

    Appearance >> customize >> header settings >> custom css >> custom css snippets.

    @media only screen and (max-width: 767px) and (min-width: 480px) {
    .head_cont_info { float: right !important; }
    }

    Let me know did it work.

    Thanks
    A



  • Thanks for the help! It worked when mobile is viewed horizontally but doesn't justify to right when mobile is vertical (normal phone position).
  • Hi 

    Also add this given css code 

    @media only screen and (max-width: 480px) and (min-width: 200px)
    .head_cont_info {
       
        margin-left: 25px;
    }

    Let me know for further asistence.
    Thanks
    A



  • Hi celibre

    Any update here.?

    Thanks
    A
  • No change after adding latest code. Still aligned to the left on vertical view of mobile.
  • edited January 4
    Hi 

    There is no any custom css http://prntscr.com/drdyd7

    please add again this given css

    @media only screen and (max-width: 480px) and (min-width: 200px){
    .head_cont_info {
       
        margin-left: 25px;
    }
    }

    Let me know
    Thanks
    A
  • that kind of worked. basically centered the first 2 images but didn't right justify them in portrait mode. attached are what they look like in portrait and landscape modes.
    Screenshot_20170104-054721.png
    419K
    Screenshot_20170104-054731.png
    268K
  • Hi 

    Can you please indicate with screen shot where and in which sequence you would like to show your header. so we can  help you better.

    Thanks
    A
  • the way the landscape mode is, is good. would like portrait mode to look like the attached. thanks for the help.
    celibre-landscape.jpg
    38K
    celibre-portrait.jpg
    90K
  • Hi 

    Please first confirm layout firt http://prntscr.com/drq4xy
    if this is good for you remove all above given css and add this given css

    @media only screen and (max-width: 480px) and (min-width: 200px){
    .head_cont_info {
    margin-left: 65px;
    }

    .head_cont_info a:nth-child(3) {
    margin-left: 70px;
    }
    }

    Thanks
    A
  • Instead of this, how can I increase the entire contact header column left? Please view attached image. Thanks!
    celibreScreenShot.JPG
    87K
  • the reason for the above request is that I noticed on smaller screen sizes like tablets, 13" laptops or smaller, etc... the contact header info becomes two lines instead of one. Prob would be best just to leave as is, left justified on mobiles and fix this issue instead. Really appreciate your help.
  • Hi celibre

    If you want to change header column values follow given instructions 

    Go to in your theme directory >> header.php 
    Find line number 28 and col-md-6   to col-md-4
    Find line number 83 col-md-6   to   col-md-8

    Thanks
    A
  • worked great! Thanks for your help!
  • Hi celibre

    Glad we were able to help. If you’re happy with our products and support, please leave us a kind review here: https://wordpress.org/support/theme/health-center-lite/reviews/?filter=5

    Thank you for your time. We appreciate it!

    Thanks
    A
This discussion has been closed.