[Resolved] Buttons not showing on mobile

[Author]

Posts

[Pete]

Hi there,

We're at the stage of ensuring pages working well on mobile. When actually viewing this page:
hidden link

On an iPad, the SEARCH button isn't showing, all we're getting is a red test link.

Have we done something, or not done something to sort this please?

Thank you. P

[Shane]

Hi Pete,

Thank you for getting in touch.

The problem is that you have a hover effect on the button. On mobile devices there isn't a hover or mouse over action that will let the red background display.

This is why you are only getting the red text but not the background around it.

Thanks,
Shane

[Pete]

Hey Shane,

Hmmm ok, this must have been something set unintentionally, that said I have removed CSS below:

[type=button]:hover,
[type=button]:focus,
[type=submit]:hover,
[type=submit]:focus,
button:hover,
button:focus {
color: #ffffff;
border-color: #626972;
background-color: #626972;
}

Is this what you were seeing?

The issue, the button still isn;t showing on iPad.

Thank you

[Shane]

Hi Pete,

I checked again and it seems some default styling might be getting added by your theme.

You will perhaps need to overwrite this and create a physical styling for the button.

Try this.

.js-wpv-submit-trigger{

background-color: #c36;
color: black;
}

This should give a physical button instead of it showing up on the hover effect.

Thanks,
Shane

[Pete]

Hey Shane,

Thanks for that. We use a barebones theme that has nothing in it so it can't be the theme messing with it.

That said your code works fine. I had to add a top margin:

.js-wpv-submit-trigger{
background-color: #626972;
color: #ffffff;
margin-top: 23px;
}

Can I ask? Why is this code only affecting the mobile view? The margin has no effect on desktop view, which is a good thing.
How do I get rid of the 'pink' hover please?

Finally, and important...why does our site show when viewed on tablet using Safari, are the search fields bubbles? (see first pic I sent you).
On other sites using Toolset, these form your showcase, there forms look on an iPad, just like they do on a PC.

This is just one from your showcase:
hidden link

Thank you as always, Pete

[Shane]

Hi Pete,

Can I ask? Why is this code only affecting the mobile view? The margin has no effect on desktop view, which is a good thing.

Not sure but it should be affected. If not then its caching because checking the site I see the margin css affecting the button. See Screenshot

How do I get rid of the 'pink' hover please?

To get rid of this you need to overwrite the hover effect that is there.

.js-wpv-submit-trigger:hover{
background-color: #626972;
}

Just replace the background color with the one that you want or as i've done to set it to the same background as when you're not hovering.

Finally, and important...why does our site show when viewed on tablet using Safari, are the search fields bubbles?

This has to do with the default stying the browser would use. Each browser has their default styling for standard html items.

Thanks,
Shane

[Pete]

Hi there,

Thanks for the hover code...I should have known this!!!!

The search button was inline with the other fields before I added the margin to make it inline on mobile. It seems to be working so no issues I guess 🙂

Hmmm so don;t you see it being an issue seeing the search form with this 'bubble' appearance?

My point is, this site uses Toolset and it's search form on iPad is the same on PC and iPad...no bubble form hidden link

Infact I am yet to find another side that has this bubble appearance which is a tad concerning.

[Shane]

Hi Pete,

Actually no this isn't much of a concern it is merely a styling issue of default elements.

Here is what it looks like in safari on a mac. As you can see Safari renders the search box differently.

Unless you use some custom styling to set a specific look at feel of the fields then this is how they will be rendered.

Thanks,
Shane

[Pete]

Hi Shane,

Thanks for the reassurance. It's odd because I use a Mac and Safari and it looks like below.

I may look into custom styling at a later date because I really don;t like it, others achieve a uniform look so it'll bug me until it's sorted.

Thanks again for your help today 🙂

Appreciate it. Pete

[Shane]

Hi Pete,

No prob, happy I was able to clarify this one for you.

You can mark this ticket as resolved when you're ready.

Thanks,
Shane

[Pete]

My issue is resolved now. Thank you!