Search code examples
htmlcssflexbox

Display: flex; with flex-direction: column; is shrinks elements in Firefox, but works in Google Chrome

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.

Solution

  • 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>