Responsive modes (desktop/tablet/mobile)

When I edit a page and style it to look good in desktop, tablet and mobile mode, its done.
But when I re-check it with another browser i.e. Chrome, when I resize the browser window, I can see that the tablet and mobile modes are correct, but there is a specific resolution when the design is ugly.

Is it possible to make the design nice, also for those certain resolutions between the breakpoints inside the edit page when clicking on tablet and mobile? I mean, I could type in the resolution manually I guess, but is there a better way?

Hi there,

It is probably possible but highly irrealistic to create a breakpoint for every screen resolution.
To ensure a perfect responsive experience between breakpoints, you need to work on your structure instead. It is true for every websites you will create (in Bricks or not).

For instance, and when defining style settings (such as margins, paddings, font size, etc.), you can stop using absolute units (such as pixels) to favor relative units instead (ems, percentages, etc.). Using that, in addition of other responsive best practices (I let you check tutorials on internet), will greatly reduce the need for media-query-specific classes and make your website more responsive while being easier to manage.

Have a great day,
Thomas

1 Like