Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej OK, rozumiem

responsywność nie działa ucięty tekst

Chcesz wiedzieć jak sterować wyglądem strony za pomocą styli? Tutaj dowiesz się jakie możliwości ma CSS i jak poprawnie go stosować, aby uzyskać zamierzone efekty. Dowiesz się jakie nowości udostępniono w CSS3 i jak z nich korzystać.

responsywność nie działa ucięty tekst

Post 20.10.2017, 13:52:20

Witam,

Dewelopuje następującą stronkę - http://sylviadieta.pl/. Chce żeby była responsywna i działała na urządzeniach mobilnych. Obecnie wszystko działa responsywnie poza informacjami teleadresowymi na górze strony. Teraz po zmniejszeniu rozdzielczości wygląda to tak jakby tekst był ucięty i nigdzie go nie ma.

To mój kod:

Kod: Zaznacz cały
<div style="width: 100%; overflow: hidden;">
      <div class="title1" style="width: 700px; float: left;">
         <div class="spaceleft" style="width: 20px; float: left;">
         </div>
         <div class="textleft" style="width: 680px; margin-left: 70px; float: left;">
            <h1><b>Sylwia Majewska</b></h1>
            <h2><b>Specjalista ds. żywienia i dietetyki</b></h2><br>
            <div class="spaceleft1" style="width: 70px; float: left;">
            </div>
            <div class="textleft" style="width: 660px; margin-left: 20px; float: left;">
               <p><b>„Niech pożywienie będzie lekarstwem, a lekarstwo pożywieniem.”</b></p>
            </div>
            <div class="textleft" style="width: 660px; margin-left: 380px; float: left;">
               <p><b>Hipokrates (460-370 p.n.e.)</b></p>
            </div>
         </div>
      </div>
      <div class="titleright1" style="margin-left: 720px; margin-right: 70px">
         <i class="fa fa-phone fa-3x" aria-hidden="true"> 501974479</i></br>
         <i class="fa fa-envelope" aria-hidden="true"> dietetyka.syl.via@gmail.com</i></br>
         <i class="fa fa-newspaper-o" aria-hidden="true"> dietetykasylvia.blox.pl/html</i></br>
         <a href="https://www.facebook.com/SylVIA-Zdrowe-Żywienie-i-Dietoterapia-1145519688833739/">Facebook</a>
      </div>
   </div>


i CSS:

Kod: Zaznacz cały
.title {
  position: absolute;
  top: 30%;
  left: 20%;
  transform: translate(-50%, -50%);
  color: black;
  text-align: left;
}
.title1 {
  color: black;
  text-align: left;
}
.titleright {
  position: absolute;
  top: 30%;
  left: 80%;
  transform: translate(-50%, -50%);
  color: black;
  text-align: right;
}
.titleright1 {
  color: black;
  text-align: right;
}


Dzięki za pomoc
aretai
Posty: 1
Dołączył(a): 20.10.2017

Powrót do CSS


 


  • Podobne wątki
    Odpowiedzi
    Wyświetlone
    Ostatni post

Kto przegląda forum

Użytkownicy przeglądający ten dział: Brak zidentyfikowanych użytkowników i 4 gości

Hosting, Domeny, SSL

Subskrypcja

Mamy 50677 zarejestrowanych użytkowników.
Najnowszy użytkownik: OQCJacki


Nasi użytkownicy napisali:

  • 936066 wiadomości
  • w 246713 tematach

Najnowsze wpisy na blogu

Najnowsze artykuły

Najaktywniejsi (ostatnie 30 dni)