Kaevon Zanjani asked 2 years ago
I am trying to use a media rule to override field width. On desktop, the field width is smaller using "frm_fourth", but on mobile its full width. I am trying to use a media rule to make the field width smaller on mobile too and override the default width on mobile. How would I go about this?
Victor Font Staff answered 2 years ago
I don't believe your problem is related to Formidable. I'm looking at your site in a mobile display and your masthead is 905px in a 320px screen. You have to adjust the masthead first so it doesn't overflow the screen. Then, if Formidable still doesn't appear correctly, you can fix it. You can't fix it until all elements on the screen behave properly on mobile.
Here's the solution. I tested adding the following to main#primary and the display is correct:
max-width: 320px;
padding: 1rem;
You're focusing on the wrong elements by focusing on Formidable and not fixing the page in general. Your media queries should adjust main#primary.
Your theme is the problem. You have to add it to your theme's style sheet.
Kaevon Zanjani
replied 2 years ago When you say theme, are you referring to WordPress theme or Formidable form style theme?
You can probably add:
@media screen and (min-width: 600px) {
#primary {
max-width: 320px;
padding: 1rem;
}
}
To the Formidable > Styles > Custom CSS section if your WordPress theme doesn't have anywhere to add custom CSS (most do however). If you do add it to the Formidable custom CSS section you may need to add '!important' to both css rules to overide the default theme style.
Chris Adams Staff answered 2 years ago
Having looked at your page CSS in more detail the issue is actually the div ID "content2" and the 2 child divs indie: wrapper and container.
You have these set to fixed widths of 700px and 650px and the .wrapper element has a left margin of 205px so they will stay that size on all screens.
For screens smaller than that they are pushing the content too wide and the parent divs are also inheriting this width.
You need to look at making those divs responsive so they adjust to all screensizes.
Please login or Register to submit your answer
Which field? All of them?
You just need to isolate them in the CSS, look here: https://css-tricks.com/a-complete-guide-to-css-media-queries/
You can inspect your fields using the developer tools in chrome to get the field ids. For instance, Cutter is field_2w269.
You can customize your css for the width you set.
This is the code I am using but it isn't working
@media screen and (min-width: 600px) {
.field_2w269 {
width: 20px;
}
}
Don't I need the class name, not the ID's?