Responsively Resize VGM Form

[gurdyworld]

Hi everyone,
I can not get the VGM Forum to resize for a mobile viewport. I thought by adding the following code to the Custom CSS field would help resize the form for mobile deivces, but it is not doing anything (except resizing the Desktop responsive viewport). Is there are code or information that someone could give me to help with this issue? My form is located here: https://gurdyworld.com/gurdyworld-censusmap/ Thank you for your support!

@media screen and (max-width: 1000px){
.wpgmaps_user_form table td{
display: block !important;
}

.wpgmaps_user_form table td input,
.wpgmaps_user_form table td textarea{
min-width: 100%;
}

.wpgmaps_user_form .wpgmza_checkbox,
#wpgmza_ugm_spm {
min-width: auto !important;
}
}

[Matthew]

Hi there,

Thank you for getting in touch with us, we do appreciate your time.

I have taken a look at your map and it appears that your VGM form is being displayed responsively on smaller screens.

Thus please may you clear your mobile browser cache and confirm if this helps?

If not, please may you confirm what is being displayed on your end?

I look forward to hearing back from you.

Kindest Regards,
Matthew

[gurdyworld]

Hi Matthew!
Yes, I did adjust the code myself and it sort of is working now, I need to redo the checkboxes. Maybe this might help others in this situation. Here is my code:

.wpgmaps_user_form * {
box-sizing: border-box;
}
.wpgmaps_user_form table td{
display: block !important;
}
.wpgmaps_user_form table td input, .wpgmaps_user_form table td select, .wpgmaps_user_form table td textarea{
min-width: 100%;
width: 100%;
margin: 0 !important;
}
.wpgmaps_user_form table td input:not(type=checkbox), .wpgmaps_user_form select {
min-height: 45px !important;
padding-left: 10px;
padding-right:10px;
}
.wpgmaps_user_form .wpgmza_checkbox, #wpgmza_ugm_spm, .wpgmaps_user_form [type=checkbox], .wpgmaps_user_form table td input[type=checkbox] {
width: auto !important;
}
.wpgmaps_user_form table tr{
display: block;
width: 100%;
}

[Matthew]

Hi there,

Thank you for getting back to me and most valued time, I tremendously appreciate it!

I am most happy to hear that it is working now and thank you for sharing your code that you had used. It was my great pleasure assisting you with this.

Should you ever require any further assistance, I am more than happy to help.

Have a fantastic day further!

Kindest Regards,
Matthew

[Author]

Posts