Firefox bookmark panel alters responsive css grid design

Question

EDIT: I posted an answer to this question below.

My project uses a 20 row by 20 column css grid layout (5% of screen for each cell). One of the pages has lines of text centered above email and password input boxes, and the input boxes are also centered. The entire area is contained with css grid cells 8-14 and grid rows 6-19, and the centering is done with padding-left.

My problem is that if I open the Firefox bookmarks, the bookmark flyout panel causes the lines above the email and password boxes to shift to the right, not centered above the email and password boxes -- in other words, it's not responsive with the bookmark panel showing. (I'm using Firefox 64, but the same thing happens in earlier FF versions).

The relevant CSS code:

.mktg_text {
  font-family: CamphorW01-Thin, sans-serif;
  font-size: 13pt;
  color: rgb(175, 222, 162);
  line-height: 1.5;
}

.EMail_Pwd {
  font-family: CamphorW01-Thin, sans-serif;
  font-size: 14pt;
}

The relevant html code:

<div class="mktg_text" style="padding-left: 5%">Thirty three characters of  text go h<br></div>
<div class="mktg_text" style="padding-left: 0%; color: rgb(175,222,162);">  Forty-one characters of text go here Forty</div>
<div class="mktg_text" style="padding-left: 8%"><span style="color: rgb (175,222,162);">Thirty characters of text go h</span></div>
<div class="mktg_text" style="padding-left: 16.5%">Sixteen characte</div>   <br><br><br><br>

<form name='myform' id='myform'>

  <div class="EMail_Pwd">
    <input type="text" class="signup_join" autofocus placeholder="Your  email address" id="email_field" name="email_field" style="width:55%;"   required>
  </div>

  <div class="EMail_Pwd">
    <input type="password" onfocus="OnFocusFn(1)" placeholder="Your password 8 characters minimum" class="signup_join" minlength="8" id="passwd" name="passwd" style="width:55%;" required></div>

</form>

<button class="btn_joinnow" id="btn_joinnow" style="margin-left: 12%; color:rgb(255,255,255)" onfocus="OnFocusFn(2)" onclick="ProcessJoinForm(1)">Join Seventy Now  </button>

<br><br><br>

<div class="agree_02" style="padding-left: 6%;">By joining you agree to our</div>
<div class="agree_03"><a href="#" class="button_joinform3" style="text-decoration: none;" onclick="ShowTermsOfSvc()">Terms of Use</a></div><br>

<div class="agree_02" style="padding-left: 9%">Already joined?&nbsp;&nbsp;Please&nbsp;</div>
<div class="agree_03"><a href="#" class="button_joinform3" style="text-decoration: none;" onclick="ShowForm(3)">Sign In Here</a></div><br><br>

<br><br><br><br>

<script type="text/javascript">
  document.myform.email_field.focus();
</script>

<script type="text/javascript">
  function OnFocusFn(call) {
    if (call == 1) {
      document.getElementById("passwd").style.borderColor = "rgb    (175,222,162)";
    }
    if (call == 2) {
      document.getElementById("btn_joinnow").style.borderColor = "rgb           (175,222,162)";
    }
  }
</script>

<script type="text/javascript">
  function ShowTermsOfSvc() {
    var elemX = document.getElementById("TOU");
    elemX.style.color = "rgb(175,222,162)";
    var elemY = document.getElementById("button_01_Hidden");
    elemY.style.color = "rgb(100,100,100)";
    console.log(elemY);
    ShowLeftLinks();
  }
</script>

The email and password boxes shrink when I open the Firefox bookmarks flyout panel, so that may be a reason why the text above does not align correctly when the bookmark panel is open.

So my question is: why do the lines of text above the email and password boxes not center correctly above them when the bookmark panel is open? Is there something about email and password boxes that would interfere with responsiveness? Is there something about the bookmark flyout panel in Firefox that causes this problem with responsive design? Is it because the text is centered using padding?

None of the other pages has a responsive problem with the Firefox bookmark flyout, but this is the only one where everything is centered with a css grid region using padding.

This is part of a much larger project so I posted this as it is now without a reproducible example in the hope that someone would know the answer to this issue with the code posted. I can produce a complete example but it will take some time to do that so if nobody can answer with the code posted above then I will have to do that. Thanks.

Answer 1

Instead of using padding to structure your columns and rows consider using Flexbox.

You can create columns and rows like so:

flex-direction: column | column-reverse | row | row-reverse;

It solves layout issues rapidly, with little complications, and is supported across all modern browsers.

Here is a complete guide to Flexbox.

Here is the list of browsers that support Flexbox.

Answer 2

Here is how I solved this -- I used a flex item to center within the grid cells.

<div class="center_text_grid flex-item header_upload">Welcome</div>

.center_text_grid {
    display: grid;
    grid-column: 5 / 8;
    grid-row: 6 / 19;
    display: block;
    overflow: auto;
    align-items: center;
    justify-items: center;
}

.flex-item {
  display: flex;
  width: 70%;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.header_upload{
    font-family: CamphorW01-Thin, sans-serif;
    font-size: 14pt;
    color: rgb(175,222,162);
}

Thanks to all who answered.