Help needed for css styling of submit button on mobile/tablet

Get Help
, , ,
1

Hey everyone,

I’m hoping someone can point me in the right direction, i’m looking to style a submit button on tablet and mobile with a media query, the below css works well on desktop but doesn’t respond at all for tablet or mobile devices, I can’t seem to find what to target:

Desktop css

body .gform_wrapper .gform_footer input[type=submit] {
	border-radius: 30px;
	border: none;
	padding: 10px 30px 10px 30px!important;
	font-size: 16px;
	color: #ffffff;
	background-color: #1b1bff;
}
body .gform_wrapper .gform_footer input[type=submit]:hover {
	background-color: #1b1bc2;
}
body #gform_wrapper .gform_footer input[type=submit] {
	border: none;
	padding: 10px 30px 10px 30px!important;
	font-size: 16px;
	background-color: #FFD47E;
	color: #171212;
}
body #gform_wrapper .gform_footer input[type=submit]:hover {
	background-color: #fab937;
}

Media query (including tablet)

/* Gravity Forms submit button media query
-----------------------------*/
@media only screen and (max-width: 768px) {
gform_button_button {
	border-radius: 30px;
	border: none;
	padding: 10px 30px 10px 30px!important;
	font-size: 16px;
	color: #ffffff;
	background-color: #1b1bff;
}
gform_wrapper .gform_footer input[type=submit]:hover {
	background-color: #1b1bc2;
}
.gform_footer input[type=submit] {
	border: none;
	padding: 10px 30px 10px 30px!important;
	font-size: 16px;
	background-color: #FFD47E;
	color: #171212;
}
.gform_footer input[type=submit]:hover {
	background-color: #fab937;
		}}
}

I’ve looked through other threads and added !important but no changes, inspecting elements is really unclear, can’t seem to see what to target, although changing things in chrome does work, for example:

.gform_wrapper.gravity-theme .gform_footer button, .gform_wrapper.gravity-theme .gform_footer input, .gform_wrapper.gravity-theme .gform_page_footer button, .gform_wrapper.gravity-theme .gform_page_footer input {
margin-bottom: 8px;
color: #ffffff;
}

Except the above doesn’t work in practice, only inside chrome inspect. Also tried removing body and changing the selectors but nothing worked.

Hope someone knows what I should do!

You can find a live waitlist form here: Netball World Cup 2023 South Africa Packages & Tickets | Join the Waitlist

Thank you,
George

2

Try adding a media query for your desktop CSS.

@media only screen and (min-width: 769px)

I believe your desktop CSS !important maybe overriding your tablet and mobile CSS.

3

Good thinking Derek, but unfortunately it had no affect.

4

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