wyszukiwarka chowa się przy mniejszej rozdzielczości

pytanie zadane 17 września 2016 w HTML i CSS przez Mistrz0000000 Bywalec (2,780 p.)

WItam, przerabiam swoją stronę pod bootstrap i jeszcze nie wiem o nim wszystkiego, pomoże mi ktoś to ogarnąć ? Na tej stronie http://polygonlombard.esy.es/oferta/ wyszukiwarka normalnie chowa się pod navbar, więc dodałem margin-top: 80px; i działa, ale na telefonach znowu chowa się pod navbar i w dodatku wcina część pierwszego produktu.

komentarz 17 września 2016 przez Filip2248 Dyskutant (8,840 p.)

Zmień tagi na bardziej dokładne! PROSZĘ!!!

2 odpowiedzi

odpowiedź 17 września 2016 przez nauwalis Mądrala (7,350 p.)

Stron anie jest responsywna, dlatego tak się dzieje. Może to się przyda http://www.infected.pl/web/tutorial-bootstrap-twoja-pierwsza-responsywna-strona.html

komentarz 17 września 2016 przez Mistrz0000000 Bywalec (2,780 p.)

no tyle że działa na tabletach i td, dopiero na telefonie się psuje

komentarz 17 września 2016 przez nauwalis Mądrala (7,350 p.)

To już dziwne, no ale gdyby była responsywna to powinna być na każdym urządzeniu

odpowiedź 17 września 2016 przez Filip2248 Dyskutant (8,840 p.)

Navbar ma jak się domyślam position: fixed; dlatego górny margines wyszukiwarki nie sprawia, że "odpycha" się ona od navbar'a, ale w tym przypadku od góry strony. Navbar ma wysokość 70px, Ty wyszukiwarce dałeś 80px marginesu co ostatecznie sprawia, że względem navbar ma ona 10px odstępu (ale tak naprawdę to margines masz 80px względem góry strony).

Gdy zmniejsza się szerokość strony to w pewnym momencie navbar przechodzi z wysokości 70px na 140px. Zgodnie z tym co napisałem powyżej wyszukiwarka chowa się za navbar'em.

Sam zmień co trzeba w kodzie. Jak coś to pisz :)

komentarz 17 września 2016 przez Mistrz0000000 Bywalec (2,780 p.)
edycja 17 września 2016 przez Mistrz0000000

Zrobiłem to tak:

.siema
{
    margin-top: 80px;
}

@media (min-width: 320px) and (max-width: 480px) {
    .siema {
        margin-top: 150px;
    }
}

i dalej nie działa

komentarz 18 września 2016 przez Filip2248 Dyskutant (8,840 p.)

Hmm. No to sprawdź czy po każdej partii elementów z float: left; masz element z clear: both;. Często dzieje się tak, że gdy nie wyczyścisz float: left'u to strona dziwnie się zachowuje. Tu masz to szczegółowo opisane: http://www.forumweb.pl/porady-i-tutoriale-www/css-clearowanie-czyli-problemy-z-float,47914

komentarz 18 września 2016 przez Mistrz0000000 Bywalec (2,780 p.)

Zrobiłem pod navbarem

i nie działa

komentarz 20 września 2016 przez Filip2248 Dyskutant (8,840 p.)

Masz bardzo dziwną strukturę strony. Na samym początku w tagu body jest div o kasie "navbar" w którym jest div o klasie "container", a pod navbar'em jest znów div "container" w którym jest div navbar - Mind Fuck (przynajmniej tak to wygląda na stronie z użyciem konsoli).

Podaj kod HTML i CSS podstrony "oferta", bo trudno się połapać w konsoli :)

komentarz 20 września 2016 przez Mistrz0000000 Bywalec (2,780 p.)

No więc tu masz kod strony oferta


<!DOCTYPE html>
<html lang="pl">
<head>
	<meta charset="utf-8">
	<title>Polygon Lombard</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link href="../css/bootstrap.css" rel="stylesheet">

	<link href='http://fonts.googleapis.com/css?family=Belgrano|Courgette&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

	<link href="../css/bootshape.css" rel="stylesheet">
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
	<div class="container">
		<div class="navbar-header">
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
				<span class="sr-only">Toggle navigation</span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
				<span class="icon-bar"></span>
			</button>
			<a class="navbar-brand" href="index.html">Polygon Lombard</a>
		</div>
		<nav role="navigation" class="collapse navbar-collapse navbar-right">
			<ul class="navbar-nav nav">
				<li><a href="/">Strona Głowna</a></li>
				<li><a href="/oferta/">Oferta</a></li>
				<li><a href="/pomoc/">Pomoc</a></li>
				<?PHP signed_menu() ?>
			</ul>
		</nav>
	</div>
</div>
<?PHP include($dynamic_content); ?>
<div class="footer text-center">
	<p>&copy; 2016 Polygon Lombard. All Rights Reserved</p>
</div><!-- End Footer -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/bootstrap.min.js"></script>
<script src="../js/bootshape.js"></script>
</body>
</html>

a tu css:

body {
    text-align: center;
    background-image:url('../img/bg.png');
    background-repeat:repeat;
}
p {
    margin: 0 0 20px;
}

.container{
    font-family: sans-serif;
    margin-left: auto;
    margin-right: auto;
}

.content
{
    margin-top: 80px;
}

.navbar {
    background-image:url('../img/bg.png');
    background-repeat:repeat;
}
.jumbotron {
    background-color: transparent;
    padding: 70px 0 0 0;
}
.footer {
    margin-top: 40px;
    padding: 40px 0;
}
.event {
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 30px;
}
.event + .event {
    padding-top: 30px;
}
.event .date {
    margin-bottom: 7px;
    color: #2a6496;
}

.faq
{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.banner
{
    margin-top: 10px;
    width: 90%;
}

.newline
{
    margin-top: 10px;
}

.siema
{
    margin-top: 80px;
}

@media (min-width: 320px) and (max-width: 480px) {
    .siema {
        margin-top: 150px;
    }
}

.menus
{
    width: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-right: 5px;
}

.center
{
    margin-left: auto;
    margin-right: auto;
}

.circle
{
    background-color: #fff;
    color: #888;
    height: 100px;
    width: 100px;
    border: 2px dashed #333;
    display: flex;
    align-items: center;
    border-radius: 50%;
    margin: 0 auto;
    margin-bottom: 20px;
}

.circle span
{
    font-size: 30px;
    display: block;
    text-align: center;
    font-weight: 700;
    margin: 0 auto;
}

.line
{
    border-bottom: 1px solid lightgray;
    margin-top: 50px;
    margin-bottom: 10px;
}

.my
{
    font-family: sans-serif;
    border: 2px dashed #0CB3EB;
    border-radius: 10px;
    width: 100%;
    padding-top: 15px;
    padding-bottom: 15px;
    font-size: 18px;
    margin-top: 50px;
    margin-bottom: 20px;
}

.navbar-nav > a{
    transition: 0.5s;
}

.footerfix
{
    margin-botton: 0;
}

.navbar-nav > li > a:hover
{
    transition: 0.2s;
    color: #1FE0B7 !important;
}

.my-text
{
    font-size: 17px;
    font-family: sans-serif;
}

.span-backlight
{
    color: #0CB3EB;
}


#custom-search-input {
    width: 50%;
    margin-left: 15px;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 0;
}

.btn-form
{
    position: relative;
    left: 0;
    top: -5px;
}

.form-inline
{
    width: 40%;
    margin-top: 80px;
    margin-left: auto;
    margin-right: auto;
}



.input-sm
{
    width: 40%;
}

select
{
    float: left;
}

.search
{
    margin-top: 80px;
}

.btn-v2
{
    height: 34px;
}

.text-contact
{
    font-family: sans-serif;
    width: 25%;
    float: left;
    margin-left: 4.162%;
    margin-right: 4.162%;

}

.wrapper {
    margin-top: 80px;
    margin-bottom: 80px;
}

.nice-text
{
    font-family: 'Courgette', cursive;
    font-size: 30px;
    line-height: 20px;
    padding: 25px 15px;
    color: #1FE0B7 !important;
    margin-bottom: 20px;
}

.nice-text:hover
{
    text-decoration: none;
}

.row
{
    margin-bottom: 20px;
}

.form-signin {
    max-width: 380px;
    padding: 15px 35px 45px;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}
.form-signin-heading,
.checkbox {
    margin-bottom: 30px;
}

.checkbox {
    font-weight: normal;
}

.wrapper .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
@include box-sizing(border-box);
}

input{
    margin-bottom: 10px;
}

.wrapper .alert-danger
{
    margin-bottom: 10px;
    font-size: 18px;
    border-radius: 10px;
}
.wrapper .alert-success
{
    margin-bottom: 10px;
    font-size: 18px;
    border-radius: 10px;
}

.text-left
{
    text-align: left;
    word-wrap: break-word;
}

.font-25
{
    font-size: 25px;
}

nav.sidebar, .main{
    -webkit-transition: margin 200ms ease-out;
    -moz-transition: margin 200ms ease-out;
    -o-transition: margin 200ms ease-out;
    transition: margin 200ms ease-out;
}

.main{
    padding: 10px 10px 0 10px;
}

@media (min-width: 765px) {

    .main{
        position: absolute;
        width: calc(100% - 40px);
        margin-left: 40px;
        float: right;
    }

    nav.sidebar:hover + .main{
        margin-left: 200px;
    }

    nav.sidebar.navbar.sidebar>.container .navbar-brand, .navbar>.container-fluid .navbar-brand {
        margin-left: 0px;
    }

    nav.sidebar .navbar-brand, nav.sidebar .navbar-header{
        text-align: center;
        width: 100%;
        margin-left: 0px;
    }

    nav.sidebar a{
        padding-right: 13px;
    }

    nav.sidebar .navbar-nav > li:first-child{
        border-top: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav > li{
        border-bottom: 1px #e5e5e5 solid;
    }

    nav.sidebar .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    nav.sidebar .navbar-collapse, nav.sidebar .container-fluid{
        padding: 0 0px 0 0px;
    }

    .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
        color: #777;
    }

    nav.sidebar{
        width: 200px;
        min-height: 20%;
        height: auto;
        float: left;
        margin-bottom: 0px;
    }

    nav.sidebar li {
        width: 100%;
    }

    nav.sidebar:hover{
        margin-left: 0px;
    }

    .forAnimate{
        opacity: 0;
    }
}

.table
{
    width: 81%;
}

th
{
    text-align: center;
}

.navbar{
    clear: both !important;
}

@media (min-width: 1330px) {

    .main{
        width: calc(100% - 200px);
        margin-left: 200px;
    }

    nav.sidebar{
        margin-left: 0px;
        float: left;
    }

    nav.sidebar .forAnimate{
        opacity: 1;
    }
}

nav.sidebar .navbar-nav .open .dropdown-menu>li>a:hover, nav.sidebar .navbar-nav .open .dropdown-menu>li>a:focus {
    color: #CCC;
    background-color: transparent;
}

nav:hover .forAnimate{
    opacity: 1;
}
section{
    padding-left: 15px;
}

a reszta cssa to bootstrap