community
community copied to clipboard
makerdao
Spacing Around Column and Callout frames Increases When Type Size Is Increased
Describe the bug Issue occurs several different browser windows, when the Type size is increased. The spacing around the column (top, bottom, left, right) also increases causing the Column to become very narrow. It does not occur on mobile device using Chrome. The issue is also seen with Callout content except that it appears to perform as expected on Chrome on my desktop (instead of just on mobile in Chrome).
To Reproduce Steps to reproduce the behavior:
- Go to resources/technical-content/palette-recipes using a mobile device or a narrow desktop browser window. (Not Chrome on mobile).
- Scroll down to the examples below the "Column" heading and adjust the type size in the browser
- See Error
- Repeat on mobile using Chrome for a comparison
Expected behavior The spacing around Column content should not increase when users increase the size of the type in the browser. The Column width should remain constant regardless of type size.
Screenshots
On mobile Safari (default type vs increased type size)
Desktop, minimized Browser window
Desktop, full width Browser window
Chrome (default vs enlarged type)
Firefox (default and two different increases in type)
Chrome on mobile (example of what is expected)
Desktop (please complete the following information):
- OS: Catalina version 10.15.6
- Browsers: Chrome, Firefox
Smartphone (please complete the following information):
- Device: iPhone SE
- Browsers: Safari, Chrome
Additional context The issue can be seen on all pages with Column content in use and to all types of columns (Full Width, Sibling, with Header). The issue is also seen with Callout content except that Callout content appears to perform as expected on Chrome on my desktop (in addition to Chrome on my mobile device).
@eringeorgen From what I can tell with my tests and your screenshots the column paddings are the same expected pixel densities. Font size changes on mobile are actually zooming in the screen (CMD and + on desktop), so this isn't an issue we can fix.
@twblack88 This is a similar wont fix as to makerdao/community-portal#439 with a possible solution being makerdao/community#858.
These kinds of fixes are difficult to tackle because there's only so much font size change support we can provide and there aren't selectors in css available to check what a device browser's current font size is.
Changing this to deprioritize. I attempted to experiment with this issue, but it's more so that these kinds of visual requests need to go to Shea prior to them coming to developers.
