SIGN UP

Use @media rule to force Single Column when Viewport < Desktop

By: Matt Clute | Asked: 09/06/2022
Forums › Category: General questions › Use @media rule to force Single Column when Viewport < Desktop
0 Vote Up Vote Down
Matt CluteMatt Clute asked 2 years ago

I am hoping to limit views of multi-column layouts to landscape orientation on larger tablets or on desktop. I have tried applying the CSS below to Formidable/Styles/Custom CSS/Add Custom CSS and a few other variations without any luck. Should this work as written here?  

@media screen and (max-width: 1350px) {
.column {
width: 100%;
}
}  

Is it possible to apply a rule like this to the formidable elements of the site and not have it be in the site-wide style sheet? Thanks.

Attachments
Desktop-Viewport.jpg
1 Answers
0 Vote Up Vote Down
Victor Font answered 2 years ago
Are you familiar with CSS Grid? Formidable's default display is CSS Grid. You have to use your browser's inspection tool to find the correct CSS class you want to change, then add the custom CSS. If you're not familiar with CSS grid layouts, see this: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
Matt CluteMatt Clute replied 2 years ago

I'm just now learning about them, thanks for sharing the resource.

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