Forum Academy Marketplace Showcase Pricing Features

Oh dear responsive design...help

Hey bubble forum readers :slight_smile:

Hope all is good by you today!

I am currently working on a prototype desktop application whereby the goal is to have all the information ready and accessible in one place in a neat fashion.

Inside each button as you can see in the screen below you are taken to another screen where you can view additional information about your trip. It is a travel planning tool. (see below)

All is well and good so that depending on the screen size on desktop the size of the buttons will change accordingly. The page is not set to be a fixed width and neither are the icons.

The desktop page width is 1200 while height is 752

But when I get on over to mobile it is a nightmare. It looks ridiculous and I am not sure how to fix it.

Essentially, how do I keep the same layout but just smaller or shrunk on mobile? :thinking:

See image below

thank you so much for your help in advance :slight_smile:

You have to use conditionals. When the current page width <= X, then Font Size is Y.
As far as groups go the best solution I came to think of until now is having multiple groups hide/show based on the current page width. Still managed using conditionals.

Look at this :smiley: :point_down:

You have to set a mobile friendly minimum width requirements for each group. For example, you mention your page max-width is set at 1200, and at the bottom you have 2 rows with 3 columns, if you want to keep the same layout for mobile (2 rows x 3 columns) you need to set the min-width to match the smallest mobile device (320ish pixels).

Just eye balling it, it looks like each of the 6 (2x3) groups is about a quarter of the page width, so lets say 320px. To make 3 groups fit in a mobile (320px) screen size, each one of them should be about 100px, so about 1/3 of its current size. So, go in group and set min width to be 33% and play around from there. Below is a screen shot of the setting. Also, Iโ€™m not affiliated in any way with them, but buildcamps responsive design guide is worth the $20.

min width

Agreed with @na811 that you should try to set a minimum width.

Iโ€™ve built a template with a responsive design. Hope this helps.


:point_up_2:

You can watch the webinar Gregory did, itโ€™s the first link on this post: My learnings on responsive design


If you need further help, reach out: Refactoring NoCode.

1 Like