CODEWITHSUNDEEP
csszurb-foundation
WpDoe
WpDoe

Reputation: 474

Set minimum sitewide with css/zurb-foundation

On one of my sites I use ZURB foundation for layouting as it really helpful to make the website responsive, however, I need to set to set an absolutely minimum width to be 700px. Meaning that the browser should not do any scaling after the screen is smaller than 700px.

What is the correct way to do it?

Any help or guidance is much appreciated.

Upvotes: 1

Views: 81

Answers (1)

Yass
Yass

Reputation: 2668

For small screen sizes, Foundation uses a max-width of 40em, which is equivalent to 640px. In the Foundation css file, you'll need to find all instances of media queries that define a max-width of 40em, and change the value to 43.75em, which translates to 700px. To maintain consistency, I would suggest sticking to using em.

The "medium" media queries kick in when the window width is greater than or equal to 40.0625em (641px), so you'll have to change these to 43.813em (701px).

Here's an interesting article that explains why Foundation uses em and why it's a good idea to use it in general: Zurb em use

Another website that allows you to convert em to px and vice-versa: px to em conversion

Upvotes: 1

Related Questions