1. Dismiss Notice

Align Header Text Added

Discussion in 'Poloray WordPress Theme' started by innovabiz18, Feb 19, 2013.

Thread Status:
Not open for further replies.
  1. innovabiz18

    innovabiz18 New Member

    Joined:
    Oct 3, 2012
    Messages:
    4
    Likes Received:
    0
    I have added some text and phone link in the header, but am finding it difficult to align so that the responsive layout is maintained. See nextstepbusiness.com.au

    The code I used is:
    <div class="phone"><span class="FONT1">REALISE YOUR TRUE BUSINESS VALUE</span><br>
    <span class="FONT2"><a href="tel:+61396075300">PHONE US ON (03) 9607 5300</a></span></div>
    </div>

    placed after the <body <?php body_class().... entry

    Styling:
    <style type="text/css">
    #phone {
    position: absolute;
    top: 40px;
    right: 250px;
    text-align: right;
    }

    }
    #phone .phone .FONT1 {
    text-align: right;
    }
    </style>


    Problem is firstly, alignment with the menu bar is varied depending on screen size and secondly, on small screen (phone) it overlaps with the logo.

    Where have I gone wrong?

    Thanks,
    Jürgen
     
    innovabiz18, Feb 19, 2013
    #1
  2. Nitesh

    Nitesh Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    5,165
    Likes Received:
    160
    You are adding html code at the wrong place, Add it just after clear div.
    Check image for reference.

    [​IMG]


    After that paste this code in Custom CSS
    Appearance > Theme Option > Styling Option > Custom CSS

    Code:
    @media only screen and (max-width: 767px) and (min-width: 480px){
.phone{
text-align:center;
}}
 
@media only screen and (max-width: 480px){
.phone{
text-align:center;
}}
     
    Nitesh, Feb 19, 2013
    #2
  3. innovabiz18

    innovabiz18 New Member

    Joined:
    Oct 3, 2012
    Messages:
    4
    Likes Received:
    0
    Thanks for that. Unfortunately it doesn't have the desired result - result is text below the logo image on left, rather than above the menu tabs on right.

    Jürgen
     
    innovabiz18, Feb 19, 2013
    #3
  4. Nitesh

    Nitesh Support Staff

    Joined:
    Oct 19, 2012
    Messages:
    5,165
    Likes Received:
    160
    Add code as shown in image and paste css given below in custom css.

    [​IMG]


    Code:
    @media only screen and (max-width: 767px) and (min-width: 480px){
.phone{
text-align:center!important;
}
}
 
@media only screen and (max-width: 480px){
.phone{
text-align:center!important;
}
}
 
.phone {
float: right;
text-align:right;
margin-bottom:20px;
}
     
    Nitesh, Feb 19, 2013
    #4
  5. innovabiz18

    innovabiz18 New Member

    Joined:
    Oct 3, 2012
    Messages:
    4
    Likes Received:
    0
    Great, thanks! That did the trick.

    Jürgen
     
    innovabiz18, Feb 20, 2013
    #5
Thread Status:
Not open for further replies.

Share This Page