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

Tekst wychodzi poza obrazek przy powiększaniu strony

Object Storage Arubacloud
0 głosów
545 wizyt
pytanie zadane 22 marca 2018 w HTML i CSS przez kacper3100 Nowicjusz (160 p.)

Na mojej stronie jest problem z tekstem wyświetlającym się po najechaniu kursorem na obrazek po powiększeniu strony.

Tak to wygląda po powiększeniu strony: 

 

Natomiast przy domyślnym rozmiarze strony tekst wyświetla się poprawnie:

 

CSS: 

.mbr-gallery .text {
  opacity: 0;
  position: absolute;
  bottom: 0;
  top: calc(20% - 24px);
  left: calc(10% - 32px);
  font-size: 15px;
  transition: .2s opacity ease-in-out;
  z-index: 5;
}

HTML: 

<div class="mbr-gallery-item mbr-gallery-item__mobirise3 mbr-gallery-item--p1" data-tags="Images, Sparklers" data-video-url="false">
                        <div href="#lb-gallery1-0" data-slide-to="3" data-toggle="modal">
                            
                            

                            <img alt="" src="../zdj.png">
                            
                            <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed posuere libero dui id orci. Nam congue, pede vitae dapibus aliquet, elit magna vulputate arcu, vel tempus metus leo non est. Etiam sit amet lectus quis est congue mollis. Phasellus congue lacus eget neque. Phasellus ornare, ante vitae consectetuer consequat, purus sapien ultricies dolor, et mollis pede metus eget nisi. Praesent sodales velit quis augue. Cras suscipit, urna at aliquam rhoncus, urna quam viverra nisi, in interdum massa nibh nec erat.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin</div>
                            <div class="mbr-gallery-title">LOREM IPSUM</div>
                        </div>

Co zrobić, by po powiększeniu się strony tekst nie wychodził poza obrazek?

2 odpowiedzi

0 głosów
odpowiedź 23 marca 2018 przez PolYGlok Pasjonat (19,450 p.)
edycja 23 marca 2018 przez PolYGlok
Strzelam, zmieniłbym px na em w czcionce...
komentarz 23 marca 2018 przez PolYGlok Pasjonat (19,450 p.)
i zastosowałbym box-sizing: border-box;
komentarz 23 marca 2018 przez EdeX Mądrala (5,110 p.)

@PolYGlok, przepraszam, wiem nie powinienem, ale czcionce :P

komentarz 23 marca 2018 przez PolYGlok Pasjonat (19,450 p.)
Powiem Ci tak sprawdzałem nawet jak to się pisze ale patrzyłem czy trzcionce czy czcionce a na resztę nie zwracałem uwagi.

Hahaha zmęczony chyba byłem, dzięki za poprawke.

ale stonka :)
komentarz 23 marca 2018 przez kacper3100 Nowicjusz (160 p.)
przeniesione 23 marca 2018 przez Eryk Andrzejewski
Niestety, nie działa. :(
0 głosów
odpowiedź 23 marca 2018 przez EdeX Mądrala (5,110 p.)
według mnie możesz użyć rem albo em ale w css musisz definiować font-size w html, a jak to nie pomoże możesz pomajstrować z @media

Podobne pytania

+2 głosów
2 odpowiedzi 658 wizyt
0 głosów
3 odpowiedzi 3,223 wizyt
pytanie zadane 21 maja 2017 w HTML i CSS przez niezalogowany
0 głosów
1 odpowiedź 855 wizyt
pytanie zadane 9 maja 2016 w HTML i CSS przez barteku12 Obywatel (1,340 p.)

92,666 zapytań

141,564 odpowiedzi

320,019 komentarzy

62,031 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...