Tagged: ,

Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #595078

    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

    #596024

    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

    #596202

    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

    #596231

    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

    #596240

    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 4 years ago by  mawebdesign.
    #596743
    #596781

    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.

    #596804

    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

    #597258

    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

    #598339

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

    Thank you

    #600073

    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

    #600177

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

    #601717

    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

    #601771

    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

    #602871

    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

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.