Telephone number in header on mobile device

Hello everyone,

I wanted to put a telephone number in the header of a site I’m working on. I scoured the forums and found some CSS that did the job almost perfectly.

It appears on desktop versions, however, when somebody uses it on mobile devices/tablets the number doesn’t show.

The site: http://81.27.85.141/DayCareN/
(Please Copy & Paste the url as the site isn’t live yet).

Thanks!
Jon

Dear Jon,

Try adding the following custom CSS code:


@media only screen and (max-width:1024px){

  .header-wrap .container .col-md-8:before{
    content: 'Tel: 01111 222 333';
    display: block;
    text-align: right;
    padding-right: 14px;
    padding-bottom: 15px;
    font-size: 23px;
    color: #ffffff;  
    margin-right: -15px;
  }
  
}

@media only screen and (max-width:767px){
  
  .header-wrap .container .col-md-8:before{
    position: absolute;
    top: -90px;
    right: 0;
    margin-right: 15px;
  }  
  
}

Regards,
Kharis

Hi Kharis,

Thank you very much for your response. However, a new problem has occurred.
Due to space related issue’s we’ve moved over to a new server. So we started from scratch. I wanted to simply copy + paste the custom CSS in, however when I do so, quite simply nothing happens. Just like I didn’t add any custom CSS at all.

The site: http://176.32.230.11/earlyachievers.co.uk/

I’ll get back to you and let you know if the CSS you gave me works as soon as I figure out why the custom CSS isn’t showing - Should I start a new thread for this?

Regards,
Jon

Hello Jon,

Yes, please open a new topic as it doesn’t relate with the current topic.

Regards,
Kharis