I am creating a multi page form and display simple numeric steps ‘1 2 3 4’ at the top. At mobile size these numeric steps automatically reformat to display vertically which a) looks odd 2) is not necessary as they could easily remain displayed horizontally. I can’t locate the required CSS to play with … could anyone help me? 2 screen shots attached (the coloured borders etc are just to help me target / test stuff). Thank you very much.
Can you share the URL to the page on your site where we can see the form?
Hi Chris Thanks for your quick response.
I have set up a temporary passworded page here:
https://gingerbeergolftravel.com/zzzgravitytemp/
Pwd: yygravity1219
You need to be looking for this
@media only screen and (min-width: 641px)
.gform_wrapper .gf_step {
}
changing the value of min-width: 340px looks to resolve your issue
@media only screen and (min-width: 340px) {
.gform_wrapper .gf_step {
}
}
So adding the below to your main css ‘should’ sort it for you.
@media only screen and (min-width: 320px) {
.gform_wrapper .gf_step {
width: auto;
display: -moz-inline-stack;
display: inline-block;
margin: 16px 32px 16px 0;
}
}
However I’d add an additional class to that particular form so other forms are not affected by the change.
1 Like
That’s been a big help. Thank you very much for your time.
1 Like