Help styling submit button on tablet/mobile

Get Help
, ,
1

Hi,

I tried this topic in August but never got to the bottom of it.

I have css targeting desktop which works well, but nothing I do successfully targets the submit button on tablet or mobile (including removing the media query altogether). I hope someone can please assist. I am using !important for tablet/mobile which also does nothing.

Form example and css in action: Netball World Cup 2023 South Africa Packages & Tickets | Join the Waitlist

Css I am using:

	/* Submit button desktop
-----------------------------*/
@media only screen and (min-width: 769px) {
body .gform_wrapper .gform_footer input[type=submit] {
	border-radius: 10px;
	border: none;
	padding: 10px 30px 10px 30px;
	color: #ffffff;
	background-color: #1b1bff;
}
body .gform_wrapper .gform_footer input[type=submit]:hover {
	background-color: #1b1bc2;
}
}
/* Submit button tablet and mobile
-----------------------------*/
@media only screen and (max-width: 769px) {
body .gform_wrapper .gform_footer input[type=submit] {
	border-radius: 10px!important;
	border: none!important;
	padding: 10px 30px 10px 30px!important;
	color: #ffffff!important;
	background-color: #1b1bff!important;
}
body .gform_wrapper .gform_footer input[type=submit]:hover {
	background-color: #1b1bc2!important;
}
}

Thank you so much.

George

2

You don’t need to add a media query for desktop when your mobile css is the same. Your css will automatically apply to all breakpoints. You only need the mobile media query.

You might want to try border-style:none !important.

Other than that your css for desktop and mobile are identical.

You may also try changing the mobile media query to 768px.

Are you saying the CSS you’re adding has no effect at all for desktop and mobile?

If that’s the case can you share a url?

3

Hi Derek,

Thank you for your reply.

Sample URL: Netball World Cup 2023 South Africa Packages & Tickets | Join the Waitlist

The CSS works on desktop, but does not work on tablet or mobile. You’ll notice the submit button is blue on the above URL in desktop view, but when you go to tablet or mobile view, the button turns to pink outline.

I have tried it again with removed media query and unfortunately it has no affect on tablet/mobile. There must be something blocking it. I agree, the media query is irrelevant, I suppose it’s there to try and get the button to change on tablet/mobile if the css without media query works, that’s complete fine, I am trying to get the button to be blue on all devices.

I hope you can help!

Thanks,

George

4

Give this a whirl:

@media only screen and (max-width:641px) {
    input#gform_submit_button_2.gform_button.button {
        background-color: blue;
        border-color: blue;
        color: white;
    }
}
5

Nice form by the way.

1 Like
6

Thanks so much.

Unfortunately that didn’t work. On chrome inspect I can see this is being applied by theme, but cannot figure out how to over-ride it:

.elementor-kit-3550 button, .elementor-kit-3550 input[type=button], .elementor-kit-3550 input[type=submit], .elementor-kit-3550 .elementor-button {
    font-family: neue haas unica,Sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 10px 10px 10px 10px;
    padding: 15px 25px;
}
7

If the CSS I sent you doesn’t work then really the only way to know for sure is to log in and add CSS the old fashion way. On a rare occasion, the CSS applied in the Google dev tools doesn’t work on your actual site.

This is the culprit though, but I would like to add that the CSS below will apply the changes to other buttons outside of Gravity Forms. If you want to try, see below and let me know.

[type=button], [type=submit], button {
    background-color: transparent !important;
    color: blue !important;
    border: 1px solid blue !important;
}

Screen Shot 2021-11-23 at 6.56.23 PM
Screen Shot 2021-11-23 at 6.56.23 PM548Ă—538 53.9 KB

8

Yep, I am logging in and applying the CSS via the WP customiser. Unfortunately that did work on desktop but still no change to tablet/mobile.

This is driving me crazy!

9

Can you add the media query to the top of that snippet and try again? I pulled the site up on a mobile breakpoint and that’s the css selector which is styling that. It’s possible they’ve added their css inline though. Which could be overriding the css you’re adding.

Does your theme have a css editor where you can add css to as opposed to your customizer?

10

Didn’t work with media query, I might see if the theme people can assist as it looks like it might not be a GF issue now.

Thank you for your help.

1 Like
11

Please post the solution when you find it.

12

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.