• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Object Storage Arubacloud
0 głosów
475 wizyt
pytanie zadane 1 maja 2018 w HTML i CSS przez Krzymado Początkujący (370 p.)

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.

komentarz 1 maja 2018 przez RafalS VIP (122,820 p.)
A jak formatujesz ten kawałek w CSS i jak wygląda kod strony?
komentarz 1 maja 2018 przez Krzymado Początkujący (370 p.)
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>

 

komentarz 1 maja 2018 przez Krzymado Początkujący (370 p.)
Tak o to wygląda, no na prawdę próbowałem ale no nie wiem jak to zrobić...

2 odpowiedzi

0 głosów
odpowiedź 1 maja 2018 przez PolYGlok Pasjonat (19,450 p.)
Daj footer .foot1 width: 100%;
komentarz 1 maja 2018 przez PolYGlok Pasjonat (19,450 p.)
i @media (max-width: bym dał na 530px albo zmniejszył czcionke bo sie zawija pod spód ostani napis "kontakt" przy 500px.
komentarz 1 maja 2018 przez Krzymado Początkujący (370 p.)
dzięki
komentarz 1 maja 2018 przez PolYGlok Pasjonat (19,450 p.)
NP. :)
0 głosów
odpowiedź 1 maja 2018 przez pablop76 VIP (123,180 p.)
Poczytaj o reset css.

Podobne pytania

0 głosów
3 odpowiedzi 1,515 wizyt
0 głosów
0 odpowiedzi 251 wizyt

92,661 zapytań

141,557 odpowiedzi

319,999 komentarzy

62,028 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...