skip to Main Content

I need my design to look the same on different browsers, but I can’t find out why the same code gives me different results in different browsers. elements are shrinked in Firefox while using flex-direction: column; with display: flex;

#a-p-c {
  width: 95%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#logo {
  width: 150px;
  height: 20px;
  object-fit: cover;
  contain-intrinsic-size: 150px 20px;
}

#title {
  font-size: 18px;
  text-align: center;
  color: #333;
  font-weight: 400;
}

#phone {
  height: 55px;
  width: 95%;
  text-indent: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  outline: none;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

#addphone {
  height: 50px;
  width: 60%;
  border: none;
  outline: none;
  font-size: 18px;
  border-radius: 10px;
  background-color: #607D8B;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
<div id="a-p-c">
  <img id="close" src="http://192.168.1.7/fullbx/icons/search-close.svg">
  <img id="logo" src="http://192.168.1.7/fullbx/icons/logo.png">
  <br>
  <span id="title">განცხადების დასამატებლად აუცილებელია ვალიდური ტელეფონის ნომრის დამატება.</span>
  <br>
  <input id="phone" type="number" placeholder="ტელეფონის ნომერი (+995)">
  <br>
  <button id="addphone">დამატება</button>
</div>

Google chrome:enter image description here

Firefox: enter image description here

Sorry for the bad quality photos.

2

Answers


  1. Different browsers handle CSS differently. Try adding this to the top of your CSS file:

    * {
      box-sizing: border-box;
    }
    

    May help with consistency across different browsers

    If that doesn’t work also add this to the #logo, #phone, and #addphone:

    flex-shrink: 0;
    flex-grow: 0;
    

    And to the #title just:

    flex-shrink: 0;
    

    These can ensure that things aren’t unexpectedly resizing themselves.

    Login or Signup to reply.
  2. The issue is the <br> tag not working in firefox. That’s why you are not seeing the same in chrome and firefox.

    Using <br/> to add spacing between HTML elements is bad practice. I suggest assigning CSS padding or margins to your form elements. The following post is very informative: When to use
    line breaks vs CSS positioning?

    #a-p-c {
      width: 95%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    
    #logo {
      width: 150px;
      height: 20px;
      object-fit: cover;
      contain-intrinsic-size: 150px 20px;
      margin: 10px;
    }
    
    #title {
      font-size: 18px;
      text-align: center;
      color: #333;
      font-weight: 400;
      margin: 10px;
    }
    
    #phone {
      height: 55px;
      width: 95%;
      text-indent: 10px;
      border-radius: 10px;
      border: 1px solid #ccc;
      outline: none;
      font-size: 18px;
      font-weight: 600;
      cursor: pointer;
      margin: 10px;
    }
    
    #addphone {
      height: 50px;
      width: 60%;
      border: none;
      outline: none;
      font-size: 18px;
      border-radius: 10px;
      background-color: #607D8B;
      color: #fff;
      font-weight: 600;
      cursor: pointer;
    }
    <div id="a-p-c">
      <img id="close" src="http://192.168.1.7/fullbx/icons/search-close.svg">
      <img id="logo" src="http://192.168.1.7/fullbx/icons/logo.png">
      <span id="title">განცხადების დასამატებლად აუცილებელია ვალიდური ტელეფონის ნომრის დამატება.</span>
      <input id="phone" type="number" placeholder="ტელეფონის ნომერი (+995)">
      <button id="addphone">დამატება</button>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search