Home>Support>Add “Call” Button for mobile usage & smaller font size in masthead

Add “Call” Button for mobile usage & smaller font size in masthead

By pentzy, 9 years ago. Last reply by Greg Priday, 8 years ago.

I am using the premium Vantage theme. I would like to add a “call” button for my mobile version for people to call our office directly from their phones. Any way that can be done?
Also, I need to make the font in the masthead smaller. The word ‘chiropractic’ on the masthead wraps around on the mobile version.
The website is dev.pentzfamilychiropractic.com
Thanks!

URL: http://www.dev.pentzfamilychiropractic.com

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Hi Pentzy

    Sure, pretty easy, if you are in a widget are then you can use a SiteOrigin Button widget. The URL will look as follows:

    tel:+0000000000

    Replace my zeros with numbers. It must be the full international format. If the user is on a phone enabled device a call will be made. Hooked up to my iPhone my laptop will even try call (gives a choice before doing so).

    To stop the first overlap, add this big chunk to Appearance > Custom CSS, I’ve already setup the breakpoint value:

    /* Vantage Header Responsive Breakpoint */

@media (max-width: 1100px) {
  body.responsive header#masthead .hgroup {
    text-align: center;
  }
  body.responsive header#masthead .hgroup .logo {
    float: none;
  }
  body.responsive header#masthead .hgroup .logo img {
    margin: 0 auto;
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }
  body.responsive header#masthead .hgroup .support-text,
  body.responsive header#masthead .hgroup #header-sidebar {
    position: static;
    display: block;
    margin-top: 30px;
    max-width: 100%;
  }
  body.responsive header#masthead .hgroup .support-text img,
  body.responsive header#masthead .hgroup #header-sidebar img {
    max-width: 100%;
    height: auto;
  }
  body.responsive header#masthead .hgroup #header-sidebar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    height: auto;
  }
  body.responsive header#masthead .hgroup #header-sidebar .widget {
    display: block;
    margin: 0 auto;
    float: none;
  }
}

    Then to start dropping the font size of the title down on mobile, add the following to Custom CSS:

    /* Header Title */

@media (max-width: 680px) {
	#masthead .hgroup h1 {
	  font-size: 28px;
	}
}

    You can edit the two values there as required.

  2. 9 years, 2 months ago pentzy

    Thanks! is there anyway I can hide that on the desktop ans only show on mobile?

  3. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Sure, try the following. Edit the widget we’re working with. Click Attributes in the right column and add a widget class as follows:

    mobile-only

    Then go to Appearance > Custom CSS and try the following:

    .mobile-only {
display: none;
}

@media (max-width: 680px) {

.mobile-only {
display: block;
}

}
  4. 9 years, 2 months ago pentzy

    there is no attributes option in the header tab. i went to customize–>widgets–>header and selected the siteorigin button.

    it doesn’t have the attributes section like the rest of the pages do

  5. 9 years, 2 months ago Andrew Misplon
    Hi, I Work Here

    Sorry, I thought we were looking at the button in Page Builder. We can do it using the ID as you’ve inserted it. Try changing your CSS to:

    #mobile-only {
display: none;
}

@media (max-width: 680px) {

#mobile-only {
display: block;
}

}
  6. 8 years, 9 months ago Mike Davies

    Andrew,

    I am trying to accomplish this same thing and your mobile only coding is not working. I have added the widget class and added the custom css but it is still showing up on both mobile AND desktop. Could you please check this code for yourself to ensure you used the right code?

    Thanks,

    Mike.

    • 8 years, 9 months ago Greg Priday
      Hi, I Work Here

      Hi Mike

      We’d like to help you, but can you please start a new thread with your question? We can only offer you the best support possible when you’re the owner of a thread.

      Page: New Thread

      If you’re a premium user, please be sure to enter your order number so we can properly prioritize your thread.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More