rozmiar zdjęcia

pytanie zadane 4 stycznia 2022 w HTML i CSS przez Nikon221 Początkujący (340 p.)
edycja 4 stycznia 2022 przez Nikon221

nie mogę dopasować strony do rozdzielczości ekranu. Moja rozdzielczość to 1920x1080 a obraz o szerokości 1920 pikseli wychodzi mi poza ekran. Proszę o pomoc

link do całego kodu wraz ze zdjęciami: https://mega.nz/file/rPJB2aCZ#OY7vW1yFZ-d0Fb73UvYvw8D-1NEnSmSV5XSA-Dw0LPU

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/style.css">
</head>
<body>
        <img src="../img/Zrzut ekranu 2021-10-18 o 15.21.01.png">
    <p class="absolute_text1">
        <b>Opanuj stres i przejmij kontrolę<br>
            w biznesie i życiu prywatnym!</b>
    </p>
    <p class="absolute_text2">
        <b>Poznaj techniki koherencji w trakcie spotkań<br>
            jeden na jeden i zapanuj nad swoim stresem.</b>
    </p>
    <button class="absolute_button1">
        <b>Zapisz się na kurs</b>
    </button>
    <button class="absolute_button2">
        <b>O mnie</b>
    </button>    
</body>
</html>

body{
    margin: 0;
    width: 100%;
    height: auto;
}
img {
    display: block;
    
}
.relative {
    position: relative;
} 
.absolute {
    position: absolute;
    margin: 8px;
}
.absolute_text1 {
    position: absolute;
    top: 169.47px;
    left: 268px;
    font-family: Ubuntu;
    font-size: 70px;
    margin: 0;
    color: white;
}
.absolute_text2 {
    position: absolute;
    top: 366px;
    left: 268px;
    font-family: Ubuntu;
    font-size: 25px;
    margin: 0;
    color: white;
}
.absolute_button1 {
    position: absolute;
    top: 531.97px;
    left: 268px;
    background-color: #D32A34;
    color: white;
    border: none;
    padding-left: 36px;
    padding-right: 36px;
    padding-top: 24px;
    padding-bottom: 24px;
    font-size: 20px;
}
.absolute_button2 {
    position: absolute;
    top: 531.97px;
    left: 528px;
    border: solid #D32A34;
    color: white;
    background-color: transparent;
    width: 239px;
    height: 71px;
    font-size: 20px;
}

1 odpowiedź

odpowiedź 4 stycznia 2022 przez Us Użytkownik (880 p.)

Cześć,

Aby Tobie pomóc, trzeba by przerobić naprawdę wiele w tym kodzie, a najlepiej napisać cały kod od nowa. Praktycznie żaden element na stronie nie jest responsywny, zdjęcie na samym dole jest na chama przesunięte top:1400px... Jak chcesz, żeby strona nie przesuwała się poziomo to zastosuj coś takiego:

body
{
overflow-x: hidden;}

Ale to nie rozwiąże miliona innych problemów na Twojej stronie. Dowiedz się więcej o responsywności tym bardziej, że jesteś początkujący i nie wklejaj w ten sposób zdjęć, bo nic nie widać.

komentarz 4 stycznia 2022 przez Nikon221 Początkujący (340 p.)

mnie nie chodzi o to, żeby strona się nie przesuwała poziomo tylko o to, że wszystko jest większe niż powinno być

komentarz 4 stycznia 2022 przez Us Użytkownik (880 p.)

Dodaj "width:100%;" do pierwszego zdjęcia (tła) niebieskiego oraz do tych klas:

.absolute_image4

.absolute_image6

komentarz 4 stycznia 2022 przez Nikon221 Początkujący (340 p.)

czy wielkość elementów na stronie może być inna na innej ilości cali?

komentarz 4 stycznia 2022 przez Us Użytkownik (880 p.)

A nawet musi. W responsywnej stronie internetowej w gruncie rzeczy, chodzi o to, że wszystkie elementy widoczne na ekranie komputera, są również dobrze widoczne i w odpowiedni sposób poukładane na ekranie tak małym jak smartfon, a użytkownik nie musi przesuwać strony od lewej do prawej, aby znaleźć to czego szuka. Możesz to łatwo sprawdzić, klikając prawym przyciskiem myszy na stronie internetowej i wybrać "zbadaj". To okienko, które wyskoczy możesz przesuwać od lewej do prawej, a u góry po prawej stronie zaraz przy podziałce oddzielającej okienko od Twojej strony masz rozdzielczość. W ten sposób sprawdzisz jak strona zachowuje się na różnych rozdzielczościach. Dla przykładu sprawdź tą stronę i swoją, a zobaczysz różnicę. W dzisiejszych czasach to "must have". ]

Na Twojej stronie internetowej elementy nie zmieniają wielkości i położenia w zależności od wielkości wyświetlacza, w związku z tym element, który ma szerokość 500px na komputerze, będzie miał go również na telefonie i tym samym może zasłaniać inne elementy lub/i przeszkadzać w korzystaniu z Twojej strony.

komentarz 4 stycznia 2022 przez Nikon221 Początkujący (340 p.)

dzięki to spróbuję od nowa napisać

1	komentarz 4 stycznia 2022 przez Us Użytkownik (880 p.) Na początek spróbuj układać elementy jeden pod drugim tak, aby nie korzystać z "position:absolute". Jak czegoś nie wiesz to pisz nawet na priv, spóbuję pomóc.