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>
Sorry for the bad quality photos.
2
Answers
Different browsers handle CSS differently. Try adding this to the top of your CSS file:
May help with consistency across different browsers
If that doesn’t work also add this to the #logo, #phone, and #addphone:
And to the #title just:
These can ensure that things aren’t unexpectedly resizing themselves.
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 useline breaks vs CSS positioning?