hello all ~

I am looking to see what is a better option when doing mobile first with breakpoints. Should i disable them? or keep them open to ensure quality?

When I had them enabled i noticed that after a certain point the screen wouldn't keep any of my changes and turned everything I had placed into its most basic form.

I'd love to avoid making that costly mistake
Thanks in advance ~~~

Also I've noticed that many of the viewpoints are listed in either px or em. Which one is better to use for breakpoints, considering that many of the phones listed have changed now?

Hi Zoe, to me i just use PX but thats mostly because I'm old school. As far as breakpoints in general, i use the default ones used in Foundation. The only time I will ever add another breakpoint is if its really needed. Does my client want to see things a specific way on his ipad in portrait mode? If so I will create another breakpoint at that width and arrange the content.

Remember with breakpoints in general they are used just get your content doing the things you want it to do at different screen widths. Bottom line is you want your content layout to look good at any size. If for some reason for example the font is two large causing things to look broken at a certain width, you could add a breakpoint and adjust the size for that point.

You should not just add breakpoints for the sake of adding them or trying to make it fit phone x or phone y. You want to make your content look good regardless of the size. I find myself just sliding my slider from desktop all the way down to mobile making sure my content and layout is good. This allows us to have a great website for any size device rather than designing for specific sizes.

Hope this helps
Steve

Hi Zoe
Steve has some good points,
I would just add for a new design, then you keep the breakpoints for the "BODY set to "px" , and don't worry about "em" for empty "BODY" and stick to "PX"

The trick then is to do your styling for the body "FIRST CHILD" elements (which are usually some sort of container, whether they be CSS Grid Based Child Elements/or "Framework Based Elements (the old fashioned "Sub-grid" a plain "Container"," HTML Element", "Link Container" "Form Wrapper"

based on their own "WIDTH" and "HEIGHT" relative to the body width, using the available variations, and that relationship to the "BODY" which if all breakpoints are disabled, will change according to the actual width rather than a default breakpoint width.

Sound more complicated than it actually is, but does require some planning and even a schematic layout already prepared and agreed styling/sizes etc, with a client if necessary, or if its one of your own, then just let go and let the designer juices flow

As an example I have a couple of step by step tutorials on setting something up very basic, more of an introduction than a how to, which might get you started, but obviously each approach to each project may need to be different, but some of the basics are constant.

By the way this way applies to all frameworks, (even frameworkless (which of course doesn't have any default breakpoints set, until you set one. or choose one of the recommended breakpoints that are available by selecting the icons thingies next to the little box indicating the breakpoint widths in PX)

Are your displays in default typically good to see on mobile as well as desktop? I think that the default breakpoints will work well, but I wanted to make sure

yes, I'd like to see those step by step videos if at all possible, because I think I'm getting it. before making this post, I went back and reread up on a few of the topics people have already asked, and you made a great point almost 3 years ago I think "once you get the hang of it, it will turn into joy to create on site designer" or something like that. I think I've almost made it to that point

When I was new to the use of breakpoints and also just started making my component collections, I popped them in wherever I saw the need for a change. The attachment shows what the breakpoint slider area of the 'mother' project file for Frameworkless components used to look like.

In the meantime, I have learnt how to avoid a lot of those br.points by using % or vw/vh with a fixed min and max in px. Now I typically use 1 breakpoint where the design goes from mobile to wide. It happens that I don't need any at all.