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:
Firefox:
Sorry for the bad quality photos.