Skocz do zawartości
  • 0

Na telefonie Ucina mi prawy bok html

zg1

Pytanie zadane przez zg1,

 Udostępnij

Pytanie

4 odpowiedzi na to pytanie

Rekomendowane odpowiedzi

  • 0
zg1

zg1 0

Opublikowano
  • Autor
Opublikowano (edytowane)

Tutaj jest kod z jednej ze stron html 
 

Spoiler 

<html>
  <head>
    <meta charset="utf-8">
    <title>Strona Główna</title>
    <!--logo license: http://www.iconsmind.com/license-agreement/-->
    <link rel="shortcut icon" href="logo/logo.ico" type="image/x-icon" />
    <link rel="stylesheet" href="style.css">
  </head>
  
  <body>
    <div class="naglowek">
      <h1>Super Samochody</h1>
      <img src="img/auto.png"/>
    </div>

    <div id="strony">
      <ul>
        <li><a class="biezacy" href="#">Strona Główna</a></li>
        <li><a href="galeria.html">Galeria</a></li>
        <li><a href="modele.html">Modele</a></li>
        <li><a href="historia.html">Historia</a></li>
        <li><a href="onas.html">O nas</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
      </ul>
    </div>

    <div class="cars">
      <img src="img/naaaaaaa.png" alt="cars">
    </div>

    <div class="guzik">
      <button class="button"><a href="galeria.html">Więcej zdjęć</a></button>
    </div>
  </body>
</html>

 

a tutaj css
 

Spoiler 

body{
    background-image:radial-gradient(rgb(117, 117, 117), rgb(36, 35, 35));
    font-family: monospace;
    overflow-x: hidden; 
}
.button {
    background-color: #303030ad;
    border: 3px solid rgb(255, 255, 255);
    border-radius: 10px;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    margin: 0 auto;
    font-size: 16px;
    cursor: pointer;
    position: relative ;
}
.button a{
    text-decoration: none;
    color: rgb(255, 255, 255);
}
#strony{
    width:100%;
    background-color: rgb(100, 100, 100);
    margin-top: 100px;
    height: 60px;
    position: absolute;
    left:0;
    top:0;
}
ul{
    float: left;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;
    margin-left: 75px;
}
li a {
    display: block;
    float: left;
    text-align: center;
    font-size: 1.2em;
    width: 12%;
    height: 20px;
    text-decoration: none;
    color: rgb(255, 255, 255);
    background-color: rgb(31, 31, 31);
    padding: 5px 10px;
    margin-right: 15px;
    margin-top: 12.5px;
    border: 1px solid rgb(167, 167, 167);
    border-radius: 3px;
}
li a.biezacy{
    background-color: rgb(19, 101, 255);
}
li a.biezacy:hover{
    background-color: rgb(19, 101, 255);
    color: #fff;
}
li a::after{
    content: '';
    width: 0px;
    height: 2px;
    margin-top: 2px;
    display: block;
    background: white;
    transition: 300ms;
    color: white;
}
li a:hover::after{
    width: 100%;
}
li a:hover {
    color: #FFF;
    background: rgb(170, 170, 170);
    border: 1px solid rgb(88, 88, 88);
}
.naglowek{
    background-color: rgb(56, 56, 56);
    width: 100%;
    position: absolute;
    top:0;
    left:0;
    height: 100px;
    text-align: center;
}
.naglowek img{
    width: 150px;
    height: 120px;
    position: absolute;
    top:-10px;
    left:10px;
}
.naglowek h1{
    color: white;
    margin-top: 30px;
    font-size: 26px;
    transition-property: font-size;
    transition-duration: 500ms;
}
.naglowek h1:hover{
    font-size: 32px;
}
.guzik{
    position: relative;
    top: 80px;
    text-align: center;
}
.back{
    position: relative;
    top: 170px;
    left: 20px;

}
.cars{
width: 100%;
position: relative;
top: 150px;
}
.cars img{
    box-sizing: border-box;
    border-top: 5px solid white;
    border-bottom: 5px solid white;
    width: 100%;
}
.stopka{
    background-color:#474747;
	height: 30px;
	position: absolute;
    margin-top: 10px;
    bottom:0;
    padding: 10px;
    width: 100%;
    left: 0;
}
.stopkat{
    color: white;
    text-align: center;
    font-size: 16px;
    margin-top:5px;
}
.gif
{
    text-align: center;
}
.gif img{
    width: 25%;
}
.info3{
    width: 75%;
    height: 350px;
    background-color: rgb(139, 139, 139);
    border: 2px solid #fff;
    border-radius: 50px;
    text-align: center;
    margin: 0 auto;
    margin-top: 200px;
    font-size: 18px;
    padding: 10px;
    color: white;
    font-family: 'Courier New', Courier, monospace;
}
.info{
    width: 66%;
    height: 300px;
    background-color: rgb(139, 139, 139);
    border: 2px solid #fff;
    border-radius: 50px;
    text-align: center;
    margin: 0 auto;
    margin-top: 200px;
    font-size: 18px;
}
.info ul{
    text-align: left;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 2px black;
}
.info ul li{
    font-size: 14px;
    margin-left: 15px;
}
.info2{
    width: 60%;
    height: 250px;
    background-color: rgb(139, 139, 139);
    border: 2px solid #fff;
    border-radius: 50px;
    text-align: center;
    margin: 0 auto;
    margin-top: 200px;
    font-size: 22px;
}
.info2 ul{
    text-align: left;
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 2px black;
    margin-top: 25px;
}
.info2 ul li{
    margin-left: 15px;
}
.galeria{
    width: 77.3%;
    height: 420px;
    text-align: center;
    margin: 0 auto;
    margin-top: 170px;
    padding: 10px;
    border: 2px solid white;
}
.galeria img{
    width: 200;
    height: 100;
    float: left;
    margin-right: 2.5px;
    margin-left: 3.5px;
    margin-top: 5px;
}
.zdj1{
    position: absolute;
    top: 175px;
    left: 200px;
    z-index: 2;
}
.zdj1 img{
    width: 220px;
    height: 120px;
}
.zdj1inf{
    box-sizing: border-box;
    position: absolute;
    width: 220px;
    height: 120px;
    z-index: 3;
    background-color: rgb(122, 122, 122);
    border: 3px solid white;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 18px;
    top: 175px;
    left: 200px;
    transition-property: left;
    transition-duration: 2s;
}
.zdj1inf:focus{
    left:0px;
}

.zdj2{
    position: absolute;
    top: 315px;
    left: 200px;
    z-index: 2;
}

.zdj2 img{
    width: 220px;
    height: 120px;
}
.zdj2inf{
    box-sizing: border-box;
    position: absolute;
    width: 220px;
    height: 120px;
    z-index: 3;
    background-color: rgb(122, 122, 122);
    border: 3px solid white;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 18px;
    top: 315px;
    left: 200px;
    transition-property: left;
    transition-duration: 2s;
}
.zdj2inf:focus{
    left:0px;
}

.zdj3{
    position: absolute;
    top: 455px;
    left: 200px;
    z-index: 2;
}

.zdj3 img{
    width: 220px;
    height: 120px;
}
.zdj3inf{
    box-sizing: border-box;
    position: absolute;
    width: 220px;
    height: 120px;
    z-index: 3;
    background-color: rgb(122, 122, 122);
    border: 3px solid white;
    color: white;
    text-align: center;
    padding: 25px;
    font-size: 18px;
    top: 455px;
    left: 200px;
    transition-property: left;
    transition-duration: 2s;
}
.zdj3inf:focus{
    left:0px;
}

.zdj4{
    position: absolute;
    top: 175px;
    left: 560px;
    z-index: 2;
}
.zdj4 img{
    width: 220px;
    height: 120px;
}
.zdj4inf{
    box-sizing: border-box;
    position: absolute;
    width: 220px;
    height: 120px;
    z-index: 3;
    background-color: rgb(122, 122, 122);
    border: 3px solid white;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 18px;
    top: 175px;
    left: 560px;
    transition-property: left;
    transition-duration: 2s;
}
.zdj4inf:focus{
    left: 360px;
}

.zdj5{
    position: absolute;
    top: 315px;
    left: 560px;
    z-index: 2;
}

.zdj5 img{
    width: 220px;
    height: 120px;
}
.zdj5inf{
    box-sizing: border-box;
    position: absolute;
    width: 220px;
    height: 120px;
    z-index: 3;
    background-color: rgb(122, 122, 122);
    border: 3px solid white;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 18px;
    top: 315px;
    left: 560px;
    transition-property: left;
    transition-duration: 2s;
}
.zdj5inf:focus{
    left: 360px;
}

.zdj6{
    position: absolute;
    top: 455px;
    left: 560px;
    z-index: 2;
}

.zdj6 img{
    width: 220px;
    height: 120px;
}
.zdj6inf{
    box-sizing: border-box;
    position: absolute;
    width: 220px;
    height: 120px;
    z-index: 3;
    background-color: rgb(122, 122, 122);
    border: 3px solid white;
    color: white;
    text-align: center;
    padding: 25px;
    font-size: 18px;
    top: 455px;
    left: 560px;
    transition-property: left;
    transition-duration: 2s;
}
.zdj6inf:focus{
    left: 360px;
}

.zdj7{
    position: absolute;
    top: 175px;
    left: 920px;
    z-index: 2;
}
.zdj7 img{
    width: 220px;
    height: 120px;
}
.zdj7inf{
    box-sizing: border-box;
    position: absolute;
    width: 220px;
    height: 120px;
    z-index: 3;
    background-color: rgb(122, 122, 122);
    border: 3px solid white;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 18px;
    top: 175px;
    left: 920px;
    transition-property: left;
    transition-duration: 2s;
}
.zdj7inf:focus{
    left: 720px;
}

.zdj8{
    position: absolute;
    top: 315px;
    left: 920px;
    z-index: 2;
}

.zdj8 img{
    width: 220px;
    height: 120px;
}
.zdj8inf{
    box-sizing: border-box;
    position: absolute;
    width: 220px;
    height: 120px;
    z-index: 3;
    background-color: rgb(122, 122, 122);
    border: 3px solid white;
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 18px;
    top: 315px;
    left: 920px;
    transition-property: left;
    transition-duration: 2s;
}
.zdj8inf:focus{
    left: 720px;
}

.zdj9{
    position: absolute;
    top: 455px;
    left: 920px;
    z-index: 2;
}

.zdj9 img{
    width: 220px;
    height: 120px;
}
.zdj9inf{
    box-sizing: border-box;
    position: absolute;
    width: 220px;
    height: 120px;
    z-index: 3;
    background-color: rgb(122, 122, 122);
    border: 3px solid white;
    color: white;
    text-align: center;
    padding: 25px;
    font-size: 18px;
    top: 455px;
    left: 920px;
    transition-property: left;
    transition-duration: 2s;
}
.zdj9inf:focus{
    left: 720px;
}
.opis{
    text-align: center;
    margin: 0 auto;
    width: 75%;
    height: 400px;
}
.opis p{
    border: 2px solid white;
    padding: 10px;
    border-radius: 12px;
    color: white;
    background-color: rgb(255, 72, 72);
    position: relative;
    top: 50px;
}
.opis img{
    box-sizing: border-box;
    border: 4px solid rgb(255, 72, 72);
    height: 350px;
    width: 550px;
    top: 110px;
    position: relative;
    transition-property: width, height, top;
    transition-duration: 2s;
}
.opis img:hover{
    height: 420px;
    width: 700px;
}
.opis2{
    text-align: center;
    margin: 0 auto;
    width: 75%;
    height: 400px;
}
.opis2 p{
    border: 2px solid white;
    padding: 10px;
    border-radius: 12px;
    color: white;
    background-color: rgb(255, 72, 72);
    position: relative;
    top: 50px;
}
.opis2 img{
    box-sizing: border-box;
    border: 4px solid rgb(255, 72, 72);
    height: 300px;
    width: 650px;
    top: 110px;
    position: relative;
    transition-property: width, height, top;
    transition-duration: 2s;
}
.opis2 img:hover{
    height: 400px;
    width: 750px;
}
.zdjecia{
    border: 3px solid white;
    border-radius: 10px;
    width:75%;
    height: 350px;
    text-align:center;
    margin: 0 auto;
    margin-top:190px;
    background-color: grey;
}
.zdjecia img{
    margin-top: 20px;
    border: 3px solid white;
    border-radius: 10px;
    width: 500px;
    height: 300px;
}
.zdjecia button{
    position: absolute;
    height: 25px;
    width: 40px;
    color: black;
    background-color: rgb(255, 255, 255);
    top: 345px;
    text-decoration: none;
}
.dr{
    position: relative;
    left: 28.5%;
}
button:focus {
    outline: none;
}

 

 

Edytowane przez wiktorm12
Odnośnik do komentarza
https://skript.pl/temat/41977-na-telefonie-ucina-mi-prawy-bok-html/#findComment-263126
Udostępnij na innych stronach
  • 0
DJKondzio

DJKondzio 3

Opublikowano
Opublikowano

Z tego co widzę to nie zrobiłeś responsywności to że ustawisz coś na 100% i na komputerze ci działa to nie znaczy że na telefonie ci zadziała i wyświetli ci się po prawinie np. gry 1 element będzie za szeroki lub źle z pozycjonowany to może ci się wyświetlić obok tego elementu lub zmienić szerokość strony. Więc dla tego  polecam ci zrobić styl responsywny by się skalował z rozmiarem lub użyć Bootstrapa który ci już daje taki przykładowy szkic więc wystarczy ci wtedy pozmieniać wartości i będziesz miał gotowe

Odnośnik do komentarza
https://skript.pl/temat/41977-na-telefonie-ucina-mi-prawy-bok-html/#findComment-271246
Udostępnij na innych stronach
Nieaktywny
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
 Udostępnij
Pytania

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...