Responsive preview controls show overlapping pixel dimensions – RC1

Beta
#1

The pixel dimensions shown in the preview controls are just a little off. The dimensions listed for SM, MD and LG overlap by 1px.

XS – 320px - 479px
SM – 480px - 767px
MD - 767px - 979px
LG – 979px - 1200px
XL – 1200px +

I had noticed there was “something” off about the dimensions since you added the preview responsive preview controls back in, but hadn’t put together that the dimensions are different than earlier versions of Pro in addition to overlapping with each other slightly.

Here’s the prior release of Pro:
XS – 480px and smaller
SM – 481px - 767px
MD - 768px - 979px
LG – 980px - 1199px
XL – 1200px +

I’m assuming you didn’t change the actual breakpoints by 1px here and there, and that it’s just the tooltip using these particular values… ?

image image

#2

@devinelston, to me this looks like switching to mobile-first. In that case, shifting one pixel does make sense, because the logic is reverse now. However, the overlapping looks like should not happen. :slight_smile:

#3

I was assuming the change had to do with that in some way, since the order of the controls was also changed from XL –> SM to SM –> XL in their Left –> Right order, but I didn’t dive into the CSS to figure out whether that change was made under the hood or not :man_shrugging:t2: It was just throwing me off as I was using those tooltips to match up some custom CSS I was writing…

1 Like
#4

Thank you! I’ll touch base with Kory so we can review this together one more time, I don’t recall at the moment what the plan was for this. I know we did change some of the under the hood values to use fractional units like 1199.98 instead of 1199. With different factors like browser zoom and how devices do things slightly different, it was possible to have a screen width in-between 1199 and 1200 at which point no styles were applied. :grimacing:

It’s less of an issue when you’re building CSS from scratch and can just truly build mobile first, but X wasn’t built that way from the ground up years ago and we still need to do some things in ranges. We’re thinking for the responsive style update it would make more sense to add a style “from MD upwards” and include all the higher breakpoints along the way. That would support a true mobile first workflow.

1 Like
#6

Thanks again for the heads up here! We audited this and found a few more places we needed to update, so the following applies to the next patch.

We’ve reduced all max-width media queries by .02, and set the min-width to the next whole number. We picked up this technique from some things Bootstrap started doing years ago. Previously, it was 1px difference, but there were many cases where a screen size could be exactly on that width at which point no styles would be applied.

Here is what you’ll see moving forward in the theme’s CSS output.

@media (max-width: 479.98px)
@media (min-width: 480px) and (max-width: 766.98px)
@media (min-width: 767px) and (max-width: 978.98px)
@media (min-width: 979px) and (max-width: 1199.98px)
@media (min-width: 1200px)

This did include a 1px shift the inner breakpoints because we wanted to keep min-width for the whole numbers since that will come into play more in the responsive styling update.

As for the preview switcher labels, great catch on some being 1px off. We’ve made all this consistent in the next patch. They are intentionally overlapped them because 479.98px is closer to 480px than 479px. It feels a little more comfortable as you mouse over them to see the same numbers repeated rather than introducing 1px offsets. Also, eventually you’ll be able to replace 480, 767, 979, and 1200 with your own numbers, and we don’t want to show offsets on user inputted numbers.

Hopefully this clears things up! Thanks again for bringing this up as it helped us get some final polish on the changes.

3 Likes