Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • October 6, 2017 at 10:03 pm #861191
    lflask

    Hi,
    I created a header widget button but it shows awful on an iphone. Is there anything I can do to have it show better on a device? As a secondary measure I thought I would try making it a menu item since it wasn’t working but when I choose it as a button it just looks like a big color blob and nothing close to a “button per se” and I can’t figure out how to change that or the hover color. I did inspect the menu item, 844 and tried to implement custom codes but it never changed anything. Any suggestions? I left them both up on the staging site so you could see them.

    October 7, 2017 at 4:43 am #861268
    John Torvik

    Hey lflask,

    Please, could you tell me which is the button? I can`t see it.

    Best regards,
    John Torvik

    October 16, 2017 at 10:06 pm #864974
    lflask

    Sorry John I didn’t see this response until now. There is a “Schedule An Appointment” button to the far right in the header. It was built as a header widget.

    October 16, 2017 at 10:07 pm #864975
    lflask

    Here is a picture. You will see the button on the farthest right and the menu item next to it.

    October 16, 2017 at 10:54 pm #864998
    Jordan Shannon

    Hi,

    So you would like to keep the button currently on the far right? You just need the position improved on mobile?

    Best regards,
    Jordan Shannon

    October 17, 2017 at 5:20 pm #865366
    lflask

    Yes ideally, I would like to keep the button on the right if I can get it to show correctly on mobile.

    October 18, 2017 at 9:43 am #865592
    Rikard

    Hi,

    Maybe it would be a good idea to keep the button out of the header on mobile screens since there is not a lot of room for it? If you want to try that out then you can use this in Quick CSS:

    @media only screen and (max-width: 767px) {
#header .widget {
    padding-top: 67px;
}
}

    Best regards,
    Rikard

    October 18, 2017 at 6:08 pm #865860
    lflask

    Thanks Rikard, I appreciate it.

    October 18, 2017 at 6:16 pm #865861
    lflask

    Rikard, that doesn’t really work either as it then interferes with other pages overlapping the text. Is there any way to hide it all together on small (iphone) screens? Because it works fine on the iPad.

    Thanks

    October 18, 2017 at 6:43 pm #865875
    lflask

    Hi – I figured that part out and removed the header widget on max 767. A related question – on the same issue. I currently have the ul#avia-menu {
    margin-right: 165px;
    } Is there a way to make that a different pixel distance On @media only screen and (max-width: 767px) in Quick CSS? so it doesn’t crash into the logo on smaller screens?

    October 18, 2017 at 6:47 pm #865876
    lflask
    This reply has been marked as private.
    October 18, 2017 at 10:15 pm #865929
    Jordan Shannon

    Hi,

    I’m glad you were able to have some success! Do you need additional help, or shall I close this thread?

    Best regards,
    Jordan Shannon

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