Responsywne elementy na stronie.

Witam.

Piszę stronę opartą na bootstrapie.

W menu głównym mam jakiś napis i do tego logo.
Chcę aby napis był po lewej stronie a logo po prawej.

Wszystko ok, ale chciałbym aby wyświetlając strone na urządzeniu mobilnym logo nie nachodziło na ten tekst lub zmniejszało się.

<div class="container">	
		<div class="row mt">
			<h3 style="font-size: 50px; font-family: 'Freestyle Script';">Jakis napis</h3>
			<img src="assets/img/logo.png" class="image-responsive" style="position: absolute; top: 15px; right: 15px; width: 82px; height: 80px;">
		</div>
</div>
```ini

Musiałem na sztywno wpisać style="position: absolute; top: 15px; right: 15px; width: 82px; height: 80px;"> aby na normalnym komputerze wypozycjonować ten element.

Natomiast na telefonie to wszystko nachodzi się na siebie.

Jak poradzić sobie z tym problemem?

usun style i do h3 dodaj klase "pull-left" do zdjecia klase "pull-right" a za zdjeciem wstaw pustego diva z klasa "clearfix"

Faktycznie działa.

<div class="container">	
	<div class="row mt">
	   <h3 class="pull-left" style="font-size: 3em; font-family: 'Freestyle Script';">Jakis napis tutaj!</h3>
	   <img id="img-responsive" src="assets/img/logo.png" class="image-responsive pull-right" style="width: 5%; height: auto">
	</div>
      <div class="row clear"></div>
</div>

Tylko jest jeszcze jeden problem.

Ten tekst po lewej stronie on się składa na urządzeniach mobilnych ( ok wiem tak ma byc ) ale strasznie nachodzi na siebie. Czy da się jakoś zrobić lekki odstęp pomiędzy tymi słowami?

ustaw wiekszy atrybut line-height dla tego tesktu

Nic to nie daje :) Coś jeszcze da się zrobić?

a u mnie daje, wiec cos innego jest powodem w tym konkretnym przykladzie. proste odtworzenie pokazuje ze nie zachodzi an seibie tekst http://jsbin.com/dumejihe/1 wiec jakis inny styl musi to modyfikowac i psuc.

Dałem line-height: 10px do znacznika H3 i umnie wygląda to tak po zmniejszeniu przeglądarki

Tak wyglądają style do znaczników h* ( bootstrap.css)

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small,
.h1 small,
.h2 small,
.h3 small,
.h4 small,
.h5 small,
.h6 small,
h1 .small,
h2 .small,
h3 .small,
h4 .small,
h5 .small,
h6 .small,
.h1 .small,
.h2 .small,
.h3 .small,
.h4 .small,
.h5 .small,
.h6 .small {
  font-weight: normal;
  line-height: 1;
  color: #999;
}
h1,
.h1,
h2,
.h2,
h3,
.h3 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h1 small,
.h1 small,
h2 small,
.h2 small,
h3 small,
.h3 small,
h1 .small,
.h1 .small,
h2 .small,
.h2 .small,
h3 .small,
.h3 .small {
  font-size: 65%;
}
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin-top: 10px;
  margin-bottom: 10px;
}
h4 small,
.h4 small,
h5 small,
.h5 small,
h6 small,
.h6 small,
h4 .small,
.h4 .small,
h5 .small,
.h5 .small,
h6 .small,
.h6 .small {
  font-size: 75%;
}
h1,
.h1 {
  font-size: 36px;
}
h2,
.h2 {
  font-size: 30px;
}
h3,
.h3 {
  font-size: 24px;
}
h4,
.h4 {
  font-size: 18px;
}
h5,
.h5 {
  font-size: 14px;
}
h6,
.h6 {
  font-size: 12px;
}

napisalem ustaw WIEKSZY atrybut line-height. wiekszy niz domyslny. ktory u Ciebie jest ustawiony na 1, czyli 100% wielkosci bazowej, czyli 36 px, a ty dajac mu 10px zmniejszyles go. ustaw n 1.5 em. Jesli trzymasz sie responsywnosci to stosuj takze w line-height em a nie px.

Ok działą już. Nie wiem dlaczego ale okazuje się, że miało to być podane w procentach.

<h3 class="pull-left" style="font-size: 3em; font-family: 'Freestyle Script'; line-height: 70%;">Jakis cudowny napis na wstepie!</h3>