Setting Media Query - Mobile Only

I’m working on a mobile-only design.

I have the pages how I want them to look on the (various) phone resolutions.

How do I “lock in” that view so this view is not used when the media is anything other than the SM?

Just use Media quaries and check bootstrap docs for mobile screen size etc + in Bootstrap Studio u can setup custom resolution for the preview too.

U can make single file for mobile “look” in ur css/sass file. Its good way to separate project into smaller modules/components/functions etc.

If u wanna make it in css make a single file setup all css for the design and limit the screen width/height to most common mobile one (bootstrap docs).

If ure gonna use sass instead of css then u can setup a function with if statement inside sass which will setup specific styling based on x (ur screen size, or anything else like a theme etc).

Idk if that will be useful for ya cause im not sure if i understood ur question, but if it ll be I’m glad that i could help ya or give u some tips/ways, lol

This was a solid response. I appreciate it.

1 Like

Also, if you use Media Queries it’s a lot less work updating than if you make a separate CSS page for each breakpoint. That way you aren’t repeating entire areas of CSS and also less HTTP requests for your page which speeds it up too. :slight_smile:

And you’re saying to set this in the Settings? Or, do you mean elsewhere (e.g,. Responsive Options)?

Setting the number of columns is done typically in the Options Panel and I have only seen this on the “Row” settings so you’ll want to be sure the Row is the parent of the Columns. Then you’ll see a “Per Row” setting when you select the Row. Tell it how many and you’re all set other than tweaking margin/padding and or Flex options.