SIGN UP

Use media rule to override field width

By: Kaevon Zanjani | Asked: 08/09/2022
Forums › Category: How-to › Use media rule to override field width
0 Vote Up Vote Down
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?
Attachments
b30778fba27a2abac384105a9b2227bb.png
Walter JonesWalter Jones replied 2 years ago

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.

Kaevon Zanjani replied 2 years ago

This is the code I am using but it isn't working
@media screen and (min-width: 600px) {
.field_2w269 {
width: 20px;
}
}

Kaevon Zanjani replied 2 years ago

Don't I need the class name, not the ID's?

2 Answers
0 Vote Up Vote Down
Victor Font 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.
Victor Font replied 2 years ago

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.

Kaevon Zanjani replied 2 years ago

Where do I add this code? I am a bit confused

Victor Font replied 2 years ago

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?

Kaevon Zanjani replied 2 years ago

Also I am confused what the main#primary is?

Chris AdamsFDM Digital replied 2 years ago

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.

0 Vote Up Vote Down
Chris AdamsChris Adams 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.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right