Preview Size and Layout mismatch issues

Support
#1

I’m having similar issues to the user in this Forum entry: Preview size and Layout don’t all match. See the movie here:

  1. The XL matches the Layout pane and works fine
  2. The LG setting skips the LG in the Layout and shows the MD Layout
  3. The MD shows the SM layout
  4. The SM shows the XS layout
  5. The XS shows the XS layout, but note that changes to the XS layout affect the SM preview

My iMac Retina screen is set to Actual Size, Display Preference is default.

Is this a bug, or some Theme setting I need to change? Really tough to design with this going on, as you might imagine.

Also, please add my vote to being able to customize Preview size and Breakpoints in a future upgrade. thx!

#2

Hi Matt,

Thank you for writing in, but sorry I cant replicate the issue, please let us know what version of iOS and screen resolution you have so we can try to replicate it.

And also, please make sure your browser is zoomed.

Cheers,

#3

Hmm, that’s puzzling. I’m on a Retina 5K (5120 x 2880), 27-inch, 2019 iMac, running OS 11.3.1. I’m using both Safari and Firefox, both set to View > Actual Size.

Not sure what you mean by “make sure your browser is zoomed” – so not set to Actual Size? What Zoom level, then?

thx

#4

Hey Matt,

I believe Friech meant 100% zoom when he said “browser is zoomed”.

image

Testing in any non-retina screen does not produce the issue even when tested in 5120 x 2880 resolution so this is likely because of the Retina feature of your screen (see secure note).

To increase the chance for us to replicate the issue, please visit https://www.mydevice.io/ and give us Pixel Ratio and Density info. Alternatively, you can check your screen manual for the same info. If we’re able to replicate, we might know what’s causing the issue.

Thanks.

#5

I’m getting:

PIXEL RATIO

  • CSS pixel-ratio:
  • JS pixel-ratio : 2.0000

DENSITY

  • Resolution (dpi) : 192.00dpi
  • Resolution (dppx) : 2.00dppx
  • Resolution (dpcm) : 75.59dpcm
#6

Hey Matt,

Regretfully, the issue could not be replicated even setting the pixel ratio in Chrome’s emulator so this is only specific to your monitor.

Please give us full information about your monitor and OS and browser name and version and we’ll list this case in our issue tracker so this case will be queued to be investigated by our development team.

Thanks.

#7

I believe I’ve figured it out. A couple months back, when I was just getting used to Pro, I found this forum post about customizing breakpoints, and I implemented the code suggested. But again, being new to Pro, I couldn’t get things to work and forgot about it.

So I just commented out that code in the CSS and things appear to be working as expected.

So: user error! Thanks for all your diligence and attention, and sorry for the goose chase.

#8

Hello Matt,

Glad that we were able to help you. Please feel free to reach us if you have any queries regarding our theme and theme settings.

Thanks

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.