I've been trying to resolve this issue for quite some time now, but I'm still unable to find a solution. My goal is to center the Wufoo Forms visually on different screen sizes using media queries, however, despite rewriting them multiple times and checking against other solutions on Stack Overflow, I can't seem to get it to work properly. Only the smartphone size seems to display correctly on all devices. Take a look at storanddeliver.com to see the forms live on the homepage.
Here are my updated media queries:
/* Smartphones (portrait and landscape) ----------- */
@media screen and (max-width: 640px) {
form.wufoo {
margin-left: 6em !important;
margin-top: 2em !important;
clear: both !important;
}
body::before {
content: "mobile to some tablet media query fired";
font-weight: bold;
display: block;
text-align: center;
background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
}
@media screen and (max-width: 850px) {
form.wufoo {
margin-left: 1em !important;
margin-top: 0 !important;
}
body::before {
content: "tablet media query fired";
font-weight: bold;
display: block;
text-align: center;
background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
}
@media screen and (max-width : 1224px) {
form.wufoo {
margin-left: 1em !important;
margin-top: 0 !important;
}
body::before {
content: "laptop media query fired";
font-weight: bold;
display: block;
text-align: center;
background: rgba(255, 255, 0, 0.9); /* Semi-transparent yellow */
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 99;
}
}
It's worth noting that even though the Wufoo Form is embedded through an iframe, the CSS styles should be applied from a custom CSS file uploaded via my Wufoo account. You can access the complete CSS file here: