LOGO nie chcę się powiększyć na stronie. Bootstrap...

Question

Cześć,

Chodzi o logo(to obrazek), nie mogę go powiększyć, a nie wiem gdzie tkwi błąd. Korzystam z bootstrapa(netbeans IDE). Wrzuciłem kod css. Chodzi oczywiście o to żółte w rogu.

.logo
	{
	float:left;
	width:auto;
	height:auto;
	margin-left:5px;
	margin-top:20px;
	margin-bottom:25px;
	clear:both;
	
	}

 

Answer 1

Jeżeli to napis, to z tego co pamiętam powinien siedzieć w .navbar-brand(rozumiem, że to nawigacja). Wtedy możesz to powiększyć za pomocą font-size. Jeżeli to obrazek, możesz wykorzystać znacznik picture.

Comments

Ok, jak zrobię bez klasy to mam fajny odstęp między slajdami a zdjęciami jednak jak już dodam navbar-brand. To mam takie coś.

.navbar-brand {
    float: left;
    height: 2px;
    padding: 15px 15px;
    font-size: 2px;
    line-height: 5px;
}
.navbar-brand:focus,
.navbar-brand:hover {
    text-decoration: none;
}
.navbar-brand>img {
    display: block;
}
@media (min-width: 768px) {
    .navbar>.container .navbar-brand,
    .navbar>.container-fluid .navbar-brand {
        margin-left: -15px;
    }
}

<picture>
            <div class="navbar-brand">
            <div class="col-lg-3">
             
                <img  src="img/logo3.jpg" class="img-reponsive"/>
          
             </div>
            </div>
        </picture> 

 

---

daj w style.css

img{ width 100%} dopasuje Ci obraz responsywnie do wielkosci Twojego diva.

---

Trochę namotałeś krótko mówiąc :D znacznik picture dałbym w diva navbar-brand i tam dał różne loga dla różnych szerokości(poczytaj dokładnie tę sekcję ze strony, którą poleciłem). Chociaż kto wie czy wyżej podane rozwiązanie nie będzie działało?

Answer 2

daj w style.css

img{ width 100%} dopasuje Ci obraz responsywnie do wielkosci Twojego diva.

Comments

wrzuc caly kod jeszcze raz jaki masz teraz

 

---

Height usunołem i jest dobrze, dalej sobie poradzę, wielkie dzięki :)

---

no wlasnie tam w cc masz dziwne ustawianie height i line height tym sobie ustawisz wysokosc branda i logo.. powodzenia

---

.navbar-brand {
    float: left;
   
    
    padding: 15px 15px;
   
    line-height: 5px;
    
}
img{ width 100%}
.navbar-brand:focus,
.navbar-brand:hover {
    text-decoration: none;
}
img {width: 100%;}
.navbar-brand>img {
    display: block;
    
}
@media (min-width: 768px) {
    .navbar>.container .navbar-brand,
    .navbar>.container-fluid .navbar-brand {
        margin-left: -15px;
    }
}

<picture

            <div class="navbar-brand">

            </div>

            <div class="col-lg-3">

                <img  src="img/logo3.jpg" class="img-reponsive"/>

            </div>

 

        </picture>

 

---

Wrzuce kod może komuś się przyda dzięki!