1

I have a SharePoint Page with three of the following controls displayed horizontally as follows:

enter image description here

css is as follows:

.main {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;

  .searchText {
    width: 100%;
    max-width: 330px;
    margin-right: 25px;
  }

  .statusLabel {
    margin-right: 25px;
    margin-bottom: 8px;
  }

  .statusDropDown {
    min-width: 300px;
    max-width: 300px;
  }
}

On zooming the page to 400%, the controls are not visible/get truncated as follows:

enter image description here

Is there a way to display the controls vertically on zooming to 400% without getting truncated and making sure all are visible?

This is what I tried so far:

css:

@media only screen and (min-width : 600px) and (max-width : 1200px) {
  .searchContainer {
    display: block;
  
    .searchText {
      width: 50%;
      display: block;
    }
  
    .statusLabel {
      width: 50%;
      display: block;
    }
  
    .statusDropDown {
      width: 50%;
      display: block;
    }
  }  
}
user989988
  • 3,006
  • 7
  • 44
  • 91
  • Flex works great for responsive design. What is your current css and html? – Celsiuss Jan 05 '21 at 22:40
  • He's not describing something responsive, he's describing zoom mode in the browser. Yes, the site won't adjust for "zoom" levels, and zoom isn't the correct way to make something more visible or larger. Have different styles and put a text sizer on your page to control things like this. – LarryBud Jan 05 '21 at 23:37

1 Answers1

-1

When you zoom the browser media queries use effective pixels to calculate whether they should be activated.

Effective pixels

Let's say your browser is 1366px wide (a standard laptop screen size at full screen).

When you zoom to 400% you effectively make each pixel 4 times larger, or to look at it another way, you make the effective width 4 times smaller.

So on a 1366px wide browser window at 400% zoom you effectively have a browser that is 341.5px wide (1366/4).

As such if you use media queries to make the site work correctly at 340px wide it will work at a browser zoom level of 400% on a laptop.

Make the site mobile friendly and you will have no issue.

Relevant WCAG Guidance

To comply with WCAG "Success Criterion 1.4.10: Reflow" your site should work at 400% zoom on a 1280px wide browser - which is equivalent to 320px wide. If you make the site mobile friendly (responsive design) using media queries at 320px wide minimums you pass the criteria.

GrahamTheDev
  • 22,724
  • 2
  • 32
  • 64