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

Problemy z CSS

0 głosów
45 wizyt
pytanie zadane 22 listopada w HTML i CSS przez BarSki13 Użytkownik (580 p.)

Witam,

Mam problem z z responsywnością na stronie. W domu na jednym komputerze strona wygląda dobrze, lecz gdy te stronę uruchomię na innym komputerze o mniejszym ekranie już mi strona się rozjeżdża. Próbowałem zmienić wartości height aby automatycznie dostosowywała się ale nie chce działać. Poniżej wklejam kod html i css. Podacie jakieś linki albo pomysły jak można to naprawić. Dodaje także poniżej sreenshot strony.

Z góry dziękuję za odpowiedź

 

Screenshot strony:

CSS kod:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    font-family: sans-serif;
}

.none
{
    clear: both;
}

/* ------- NAVBAR ------- */

ol
{
	list-style-type: none;
	display: inline-block;
}

ol > li
{
	float: left;
}

ol > li > .ul1
{
	list-style-type: none;
	display: none;
}

ol > li:hover > ul1
{
	display: block;
}

ol > li > ul1 > li:hover > a
{
	color: #000000;
}

.main-bar
{
    background-color: black !important;
    display: flow-root;
    padding: 0 10%;
}

.li1:hover
{
    background-color: red;
    transition: all 0.5s;
}

#check
{
    display: none;
}

.logo-header
{
    display: table;
    float: left;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    margin-left: 0;
    padding: 10px;
    width: 180px;
    height: 68px;
    position: relative;
}

.logo-header a
{
    color: #22272b;
    font-size: 33px;
    font-weight: 600;
    line-height: 70px;
    text-decoration: none;
}

nav .ol1 .li1
{
    display: inline-block;
    line-height: 70px;
}

nav .li1 a
{
    padding: 15px 25px;
    border: 0;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    opacity: 1;
    text-decoration: none;
    transition: all 0.5s;
    border-radius: 14px;
}

.ol1
{
    float: right;
}

.img1
{
    float: left;
}

.checkbtn
{
    float: right;
    width: 20px;
    height: 18px;
    position: relative;
    transform: rotate(0);
    transition: 0.5s ease-in-out;
    cursor: pointer;
    top: 25px;
    display: none;
}

.checkbtn .span1
{
    background-color: #fff;
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0);
    transition: 0.25s ease-in-out;
}

.checkbtn .span1:nth-child(1)
{
    top: 0;
}

.checkbtn .span1:nth-child(2)
{
    top: 7px;
}

.checkbtn .span1:nth-child(3)
{
    top: 14px;
}

@media(max-width: 1250px)
{
    .main-bar
    {
        padding: 0 2%;
    }

    nav .li1 a
    {
        padding: 15px 20px;
    }
}

@media(max-width: 992px)
{
    .main-bar
    {
        padding: 0 10%;
    }

    .checkbtn
    {
        display: block;
        margin-right: 40px;
    }

    nav .ol1
    {
        position: fixed;
        width: 350px;
        height: 55vh;
        background: black;
        z-index: 999;
        top: 68px;
        left: -100%;
        text-align: center;
        transition: all 0.5s;
    }

    nav .ol1 .li1
    {
        display: block;
        margin: 50px 0;
        line-height: 30px;
    }

    #check:checked ~ .ol1
    {
        left: 0;
    }
}

@media(max-width: 560px)
{
    nav .ol1
    {
        display: block;
        width: 100%;
    }
}

/* ------- HEADER ------- */

.header
{
    background-color: rgb(9, 9, 9);
    color: white;
    width: 100%;
    min-height: 95vh;
}

.main-baner
{
	width: 80%;
	display: block;
	margin:auto;
	padding-top: 60px;
}

.row5
{
	float: left;
	width: 50%;
    display: block;
}

.logo-header
{
	float: right;
	width: 50%;
    display: block;
}

.title-baner
{
    margin-top: 160px;
    text-transform: uppercase;
	font-size: 24px;
    margin-bottom: 40px;
}

.text-baner p
{
    margin-top: 10px;
	font-size: 18px;
	line-height: 1.5;
    margin-bottom: 50px;
}



/* ------- SECTION ABOUT US, SECTION SHOPS, SECTION MOBILE APP ------- */

.about
{
    background-color: #161616;
    color: white;
    width: 100%;
    min-height: 65vh;
}

.container
{
	width: 80%;
	display: block;
	margin:auto;
	padding-top: 100px;
}

.row3
{
	float: right;
	width: 50%;
}

.img2
{
	float: left;
	width: 50%;
}

.title-as
{
    text-transform: uppercase;
	font-size: 24px;
}

.text-content p
{
    margin-top: 10px;
	font-size: 18px;
	line-height: 1.5;
}

.button-as
{
    margin-top: 30px;
}

.button-as a
{
    background-color: red;
	padding: 12px 20px;
	text-decoration: none;
	color:#fff;
	font-size: 18px;
	letter-spacing: 1.5px;
    border-radius: 10px;
}

.button-as a:hover
{
    background-color: rgb(146, 0, 0);
    transition: all 0.2s;
}

/* ------- SECTION MOBILE APP ------- */ 

.about1
{
    background-color: rgb(9, 9, 9);
    color: white;
    width: 100%;
    min-height: 65vh;
}

.row2
{
	float: left;
	width: 40%;
}

.img3
{
	float: right;
	width: 50%;
}

HTML kod: 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CODER</title>
        <meta name="keywords" content="keywords">
        <meta name="description" content="description">
        <meta name="robots" content="all">
        <meta name="author" content="Bartosz Maciejewski">
        <meta name="generator" content="Visual Studio Code">

        <link rel="stylesheet" href="style/style.css">
        <link rel="shortcut icon" href="photo/logo-icon.png">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css">
    </head>
    <body>
        <!-------- PASEK MENU -------->
        <div class="main-bar">
            <nav>
                <input type="checkbox" id="check">
                <label for="check" class="checkbtn">
                    <span class="span1"></span>
                    <span class="span1"></span>
                    <span class="span1"></span>
                </label>
                <div class="logo-header">
                    <a href="index.html"><img src="photo/logo-coder.png" width="140" class="img1"></a>
                </div>
                <ol class="ol1">
                    <li class="li1" style="background-color: red;"><a href="onas.html"><b>O nas</b></a></li>
                    <li class="li1"><a href="blog.html"><b>Blog</b></a></li>
                    <li class="li1"><a href="projekty.html"><b>Projekty</b></a>
                        <ul class="ul1">
                            <li><a href="#"><b>Gry</b></a></li>
                            <li><a href="#"><b>Aplikacje</b></a></li>
                        </ul>
                    </li>
                    <li class="li1"><a href="sklep.html"><b>Sklep</b></a></li>
                    <li class="li1"><a href="kontakt.html"><b>Kontakt</b></a></li>
                    <li class="li1"><a href="logowanie.html"><b>Zaloguj</b></a></li>
                </ol>
            </nav>
        </div>
        <!-------- HEADER -------->
        <header class="header">
            <div class="main-baner">
                <div class="row5">
                    <div class="title-baner">
                        <h1>Witaj na naszej <br> stronie!</h1>
                    </div>
                    <div class="text-baner">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do <br> eiusmod tempor incididunt ut labore et 
                            doloremagna aliqua. <br> Ut enim ad minim veniam, quis nostrud exercitation ullamco <br> laboris nisi ut 
                            aliquip ex ea commodo consequat.</p>
                        <div class="button-as">
                            <a href="#">Zobacz &#8594;</a>
                        </div>
                    </div>
                </div>
                <div class="img0">
                    <img src="photo/human-baner.png" width="700">
                </div>
            </div>
        </header>
        <section class="about">
            <div class="container">
                <div class="row3">
                    <div class="title-as">
                        <h1>Kim jesteśmy ?</h1>
                    </div>
                    <div class="text-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. <br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat.</p>
                        <div class="button-as">
                            <a href="#">Sprawdź &#8594;</a>
                        </div>
                    </div>
                </div>
                <div class="img2">
                    <img src="photo/kim-jestesmy.jpg" width="550">
                </div>
            </div>
        </section>
        <section class="about1">
            <div class="container">
                <div class="img3">
                    <img src="photo/mobile-app.jpg" width="550">
                </div>
                <div class="row2">
                    <div class="title-as">
                        <h1>Nasze projekty</h1>
                    </div>
                    <div class="text-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. <br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat.</p>
                        <div class="button-as">
                            <a href="#">Sprawdź &#8594;</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="about">
            <div class="container">
                <div class="row3">
                    <div class="title-as">
                        <h1>Firmowy sklep</h1>
                    </div>
                    <div class="text-content">
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. <br><br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                             magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
                             commodo consequat.</p>
                        <div class="button-as">
                            <a href="#">Sprawdź &#8594;</a>
                        </div>
                    </div>
                </div>
                <div class="img2">
                    <img src="photo/shops.jpg" width="550">
                </div>
            </div>
        </section>

 

1
komentarz 22 listopada przez Wiciorny Mędrzec (185,970 p.)
w tutorialu który kopiujesz nie ma?
polecam system kolumn, lub grid/flex z bootstrapa

https://getbootstrap.com/docs/4.0/layout/grid/

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
2 odpowiedzi 285 wizyt
pytanie zadane 29 sierpnia 2015 w HTML i CSS przez Paweł123 Nałogowiec (33,580 p.)
0 głosów
3 odpowiedzi 241 wizyt
pytanie zadane 25 czerwca 2015 w HTML i CSS przez Zero Dyskutant (8,260 p.)

85,774 zapytań

134,555 odpowiedzi

298,695 komentarzy

56,666 pasjonatów

Advent of Code 2021

Top 15 użytkowników

  1. 64p. - nidomika
  2. 62p. - ScriptyChris
  3. 60p. - Whistleroosh
  4. 57p. - adrian17
  5. 55p. - CC PL
  6. 55p. - B4mbus
  7. 53p. - Klaudia
  8. 50p. - WhiskeyTaster
  9. 47p. - rucin93
  10. 45p. - tokox
  11. 44p. - Adrian Rębisz
  12. 43p. - Michał Tartanus
  13. 41p. - Jarosław Roszyk
  14. 38p. - Argeento
  15. 18p. - Marcin Harasimowicz
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

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

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...