Post AZtZagQefACw6X5dNg by wbrowar@hachyderm.io
 (DIR) More posts by wbrowar@hachyderm.io
 (DIR) Post #AZtY8vUSyHdAkp4bCq by louis@emacs.ch
       2023-09-18T14:57:57Z
       
       0 likes, 1 repeats
       
       Re: responsive webdev. How many breakpoints do you usually define for your views?#webdev #webdesign #responsive #html #css
       
 (DIR) Post #AZtYqpAjp7DNtsmHMe by jedi@cuscuz.in
       2023-09-18T15:05:53Z
       
       0 likes, 0 repeats
       
       @louis I tend to start from a single column, so normally I have two media queries: tablet (narrow) and desktop (wide). At least this is my go to strategy.It used to be a lot more complicated, but since css grid I do this only on the overall layout.
       
 (DIR) Post #AZtZagQefACw6X5dNg by wbrowar@hachyderm.io
       2023-09-18T15:14:10Z
       
       0 likes, 0 repeats
       
       @louis I used to _never_ use fixed breakpoints and tried to make sites fully fluid, but I noticed it sometimes added more jank when you are resizing and also I found adding fixed breakpoints made everything more reliable when you make CSS changes.However, with container queries, all that has changed to where I am happy to let things flow more. Jank is still an issue but overall I prefer fluid with container queries.
       
 (DIR) Post #AZtaTk9gVhAjaXPHua by MerriNet@mastodon.social
       2023-09-18T15:24:07Z
       
       0 likes, 0 repeats
       
       @louis At job I notice usually two slices is enough, a distinction between "mobile/desktop".On personal projects I usually go for full fluid which is easier than ever with utilities like grid that guarantees minimum width for an item and wraps the items as needed.Container queries are also something I'll be looking into, I have an untested idea on how to evolve from breakpoints to queries.
       
 (DIR) Post #AZtfXz2vaTE0hX5UnY by keithjgrant@front-end.social
       2023-09-18T16:20:22Z
       
       0 likes, 0 repeats
       
       @louis I add breakpoints whatever the design needs them. Sometimes that’s none, sometimes that’s three
       
 (DIR) Post #AZtySQ6rx1681qzYTw by tennoseremel@lor.sh
       2023-09-18T19:52:49Z
       
       0 likes, 0 repeats
       
       @louis Each block usually gets its own combination. Sometimes it simply means desktop/mobile, but often enough at different sizes due to design. Sometimes things are a bit messier.
       
 (DIR) Post #AZuC9Tq1GQZhRpyPlA by horuskol@phpc.social
       2023-09-18T22:26:14Z
       
       0 likes, 0 repeats
       
       @louis Depends on the design, but I think about how it looks on the following displays:Phone, tablet (portrait), tablet (landscape), desktop (half width of screen), desktop (full width).I tend to start with desktop (half width) and use two or three custom breakpoints that suit the content rather than fixed screen values, and use fluid layout in between - which allows users to resize the window on desktop, and works with odd screen sizes.Starting to get into container queries now.