0

I have a fixed position element that stays on the side of the page. The problem is that when I zoom in (to test/meet WCAG 1.4.4) the element will go over the top of other text, making the lower text unreadable. Using minimum/maximum sizes doesn't seem to work as when I really need it to use the larger spacing it tries to use the smaller, etc. Using media sizes only works when I resize the screen, not when I zoom in.

My current thought was using Javascript/jQuery. I'm still learning how to best use these and kind of I have some of the syntax wrong but this is my general idea: When the page loads/zooms in I acquire the width of my fixed element (strap) and it adjusts the margin of the rest of the content (main) by that amount. This is what I currently have. Any help would be wonderful.

function avoidConfidential() {
  var leftMove = document.getElementById('#strap').offsetWidth;
  document.getElement('main').style.margin - left = leftMove + 5 px;
}
window.onresize = avoidConfidential;
<div>Need HTML here please</div>

I have tried min/max adjustments. I have tried media seizes. I have started a draft of the code idea I have but am stuck/know I'm doing something wrong.

Mark Schultheiss
  • 32,614
  • 12
  • 69
  • 100
AccCode
  • 9
  • 1
  • Please update with a full set of code including HTML any any CSS in play that reproduces this issue -preferably as a snippet. I added one to get you started – Mark Schultheiss Feb 24 '23 at 19:31
  • 1
    Also note that by proper formatting it clearly reveals a syntax issue on the second line in your function exists – Mark Schultheiss Feb 24 '23 at 19:37

0 Answers0