Menu icon Foundation
Responsive code for small and large

Is this possible? Let's say your design team gave you 2 designs on how to display a table, one design for desktops and another design for mobile.

In our code, I was thinking of creating two divs. The div with the large will be displayed if displaying the application on desktops and the div with the small will be displayed when displaying the application on mobile phones.

Foundation

Is this possible? Let's say your design team gave you 2 designs on how to display a table, one design for desktops and another design for mobile.

In our code, I was thinking of creating two divs. The div with the large will be displayed if displaying the application on desktops and the div with the small will be displayed when displaying the application on mobile phones.

herrreiprich about 4 years ago

Of course. have a look at the documentation and use the visibility classes http://foundation.zurb.com/docs/components/visibility.html

Rafi Benkual about 4 years ago

Sure, like herrreiprich mentions you can use the visibility classes for screen sizes or even touch devices specifically.

You can also use Interchange for specific media queries. This only loads the HTML that you need for that screen to speed up load times.

http://foundation.zurb.com/docs/components/interchange.html

Onie Camara about 4 years ago

Thank you folks! I'll read them now :)