Phone Number on Front Page Above the Fold in Mobile View Only – Edin Theme

• 

  whitebarndesignlp · Member · Nov 28, 2016 at 8:53 pm

  • Copy link
  • Add topic to favorites

  I am looking to add a button to the home page of my Edin theme website that only shows when in Mobile. It would be a click to call phone number to quickly call for emergencies or to contact. The layout right now has Contact and Location on the Front page but I am looking to add this feature in Mobile view.
  Per a Happiness Engineer:
  You could add CSS coding to adjust how the link looks, and even make it look more like a button rather than a link. Also with CSS you could set it so that it only shows up on devices with a browser window smaller than a certain size. However these are both pretty tricky to setup, so normally I would recommend reaching out for assistance in our CSS forums for help coming up with this code..

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Nov 30, 2016 at 4:35 pm

  • Copy link

  Hi there, I see your map/contact information widget on my phone when I scroll down. Where exactly are you wanting to put the phone number when for mobile viewers? At the top of the site?

• 

  whitebarndesignlp · Member · Nov 30, 2016 at 4:40 pm

  • Copy link

  Yes, on Mobile View it would be appear at the top so the user doesn’t need to scroll all the way down to quickly call.

• 

  thesacredpath · Member · Dec 5, 2016 at 5:21 pm

  • Copy link

  Hi, we can use a Media Query and add the text of the phone number, but we cannot make it a link that the user can tap on to call. The following CSS adds the phone number between the site logo and menu toggle button.

  @media screen and (max-width: 600px) {
  	.site-branding:after {
  		display: block;
  		content: "Phone Number"
  	}
  }