Inny wygląd strony w różnych przeglądarkach

Question

Witam, mój problem polega na tym, że w różnych przeglądarkach strona wyświetla się inaczej. W operze w wersji na telefon wszystko jest jak powinno:

natomiast w chrome już nie, tam jest nierówno:

Może mi ktoś powiedzieć dlaczego tak jest i jak to mogę naprawić? Niby mała rzecz ale wkurza gdy jest nierówno.

Comments

A jak formatujesz ten kawałek w CSS i jak wygląda kod strony?

---

footer{
    margin-top: 7.5em;
    text-align: center;
    background-color: rgb(52, 52, 54);
}

footer a{
    color:white;
    font-size: 2em;
    text-decoration: none;
}

footer .foot1{
    width: 100px;
    display: inline-block;
}

footer .foot1 a{
    transition: 0.5s background-size;
    background: linear-gradient(grey, grey) bottom / 0 .1em no-repeat;
}

footer .foot1 a:hover{
    background-size: 100% 0.1em;
}

footer .foot2 {
    display: inline-block;
}

footer .foot2 a{
    opacity: 0.75;
    transition: 1s;
}

footer .foot2 a:hover{
    opacity: 1;;
}

footer img{
    width: 4em;
    padding: auto;
}

@media all and (max-width: 750px) {

    footer a{
        font-size: 1.5em;
    }
}

@media all and (max-width: 500px) {

    footer{
        padding-top: 1em;
        padding-bottom: 1em;
    }

    footer a{
        font-size: 1.5em;
    }

    footer .foot1 {
       width: 100vw;
       margin-top: 1em;
       margin-bottom: 1em;
   }
   
   footer .foto2 {
       display: block;
   }
}

.footer2{
    background-color:  rgb(35, 35, 37);
    text-align: center;
    color: rgb(52, 52, 54);;
    font-size: 1.5em;
    padding: .4em;
}

<footer>
        <div class="foot1" class="l"><a href="href/omnie.html">O mnie</a></div>
        <div class="foot1" class="l"><a href="href/blog.html">Blog</a></div>
        <div class="foot2"><a href="#"><img align="center" src="photos/logo.png"></a></div>
        <div class="foot1" class="r"><a href="href/cele.html">Cele</a></div>
        <div class="foot1" class="r"><a href="href/kontakt.html">Kontakt</a></div>
    </footer>
    <div class="footer2">
        Made with <i class="fa fa-heart" aria-hidden="true"></i> by Krzysztof Wiśniewski
    </div>

 

---

Tak o to wygląda, no na prawdę próbowałem ale no nie wiem jak to zrobić...

Answer 1

Daj footer .foot1 width: 100%;

Comments

i @media (max-width: bym dał na 530px albo zmniejszył czcionke bo sie zawija pod spód ostani napis "kontakt" przy 500px.

---

dzięki

---

NP. :)

Answer 2

Poczytaj o reset css.