Tagged: ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • March 8, 2016 at 5:30 pm #595078
    mawebdesign

    Hi
    Is is possible to add a Call button when viewing on a mobile device a bit like the website in the private content?
    Thank you

    March 10, 2016 at 4:37 am #596024
    Rikard

    Hey mawebdesign,

    You can try adding a widget to the header: http://kriesi.at/documentation/enfold/adding-a-widget-area-to-the-header/

    You can then hide it for all screen sizes above mobile with something similar to this CSS:

    @media only screen and (min-width: 768px) {
#id of your widget {
display:none !important;
}
}

    Best regards,
    Rikard

    March 10, 2016 at 10:44 am #596202
    mawebdesign

    Hi Rikard
    Website link in private content

    We have completed these steps but:

    The text shows on all devices after adding the custom CSS above?

    We would like it as a button not text (so it can be clicked on to make a phone call)?

    Thanks
    Mark

    March 10, 2016 at 11:51 am #596231
    Basilis

    Hey!

    To make an element been able to be called when click, you have to use the tel schema.

    The proper URL scheme is tel:[number] so you would do

    Let us know if that helps you out.

    Best regards,
    Basilis

    March 10, 2016 at 12:06 pm #596240
    mawebdesign

    hi Basllis
    Your image is not showing?

    We changed it to this and it just shows: tel:[07804111111] ?

    Also does this make it a button?

    Thank you

    • This reply was modified 8 years, 8 months ago by mawebdesign.
    March 11, 2016 at 8:10 am #596743
    Rikard

    Hi,

    This might help you creating that link: http://stackoverflow.com/questions/1608548/how-to-trigger-a-phone-call-when-clicking-a-link-in-a-web-page-on-mobile-phone

    Regards,
    Rikard

    March 11, 2016 at 9:48 am #596781
    mawebdesign

    Hi Rikark

    We have managed to add a button.

    We would like the button to be above the logo image when viewing on mobile device ONLY?

    At the moment it shows on all devices after putting the following code:
    @media only screen and (min-width: 768px) {
    #id of your widget {
    display:none !important;
    }
    }

    We ONLY want it to display on mobile device’s.

    I have put a link to our website in the private content for you to see how it looks.

    Thank you for your help and support.

    March 11, 2016 at 11:19 am #596804
    mawebdesign

    Hi
    I have attached a link to the mobile view.

    The cart icon covers the logo and menu navagation move out place??

    Please advise
    Thank you

    March 12, 2016 at 8:42 pm #597258
    mawebdesign

    Hi

    I have managed to hide the button and only show on mobile devices,

    But the button covers my logo. see screen shot below.

    This is our custom css

    #header .widget {
    left: 50%;
    padding-top: 0;
    position: absolute;
    top: 0;
    transform: translate(-50%);
    z-index: 999;
    }

    Thanks

    March 15, 2016 at 12:38 pm #598339
    mawebdesign

    Hi
    Is it possible to get some help on my last message #597258

    Thank you

    March 18, 2016 at 5:25 am #600073
    Rikard

    Hi,

    Sorry for the late reply, it looks fine on my end using iphone6/chrome. In what browser are you getting that problem?

    Thanks,
    Rikard

    March 18, 2016 at 10:13 am #600177
    mawebdesign

    Hi Rikard
    Sorry i was doing some tests and removed it, iv put the button back now if you could check please?
    Thank you

    March 22, 2016 at 7:42 am #601717
    Ismael

    Hi!

    There’s not enough space in the header. Where do you want to display the button? And why do you need to duplicate the number?

    Cheers!
    Ismael

    March 22, 2016 at 9:54 am #601771
    mawebdesign

    Hi Ismael
    Once we get the button position correct we will delete the text phone number!

    How do we make more space for the button on mobile devices only?

    Thank you

    March 24, 2016 at 4:15 am #602871
    Ismael

    Hi!

    Instead of adding the widget, adjust the style of the default phone number to look like a button on mobile devices:

    @media only screen and (max-width: 767px) {
#header_meta {
    padding-bottom: 50px;
}

.phone-info {
    position: absolute;
}

.phone-info span a {
    background: #7995ad;
    width: 200px;
    border-radius: 3px;
    padding: 10px 10px;
    font-size: 14px !important;
    display: block;
    height: 40px;
}
}

    You have to remove the widget.

    Best regards,
    Ismael

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.