Responsywny slogan

marcinxl

2019-11-20 13:28

Jak zrobić responsywny tekst zmiennej "slogan" wyświetlany obok logo? Logo mam graficzne i chciałbym aby tekst sloganu skalował się razem z logo na urządzeniach mobilnych.

» Quick.Cms v6.x

Roni

2019-11-21 15:27

Podeślij linka do swojej strony.
Łatwiej będzie jak zobaczymy o co Ci chodzi.
Jeśli slogan masz tekstowy to nie powinno być problemu dopasowywać do mobile. Możesz nawet czcionkę ustawiać w jednostkach vw zamiast em, rem czy px.

marcinxl

2019-11-22 07:35

Podaje adres www.sizer.pl. Chciałbym aby w wersji mobilnej slogan był pomniejszony i umieszczony po prawej stronie loga.

szymaniukjerzy

2019-11-22 09:44

Zastosuj dla czcionki sloganu wartość vw zamiast em, np.:

#logo #slogan {
font : bold 4.6vw 'Arial';
float : left;
clear : right;
padding : 80px 0 0 40px;
background : inherit;
color : white;
}

Czcionka będzie się sama skalować, jednakże na małych rozdzielczościach będzie zbyt mała, w związku z tym np. od rozdzielczości 800px zrezygmuj ze skalowania i znów przejdź na em:

@media screen and (max-width:800px){
#logo #slogan{font-size:1.4em;}
}

Jerzy

marcinxl

2019-11-22 10:31

Dzięki działa czcionka się skaluje. Tylko jeszcze bym chciał, żeby tekst w trybie mobilnym był po prawej stronie loga.

marcinxl

2019-11-22 12:40

Dziwi mnie dlaczego nie działa font-size dla trybu mobilnego mimo że go spisuje w css.

openzibi

2019-11-22 13:21

Powód "znikania":

@media screen and (max-width:1199px){
#logo img{width:40%;}
#slogan {display:none;}
}

Zbyszek - StudioStrona.pl

marcinxl

2019-11-22 13:38

Specjalnie ustawiłem display:none aby w trybie mobilnym się nie wyświetłał slogan dopóki nie ogarnę jak zrobić, żeby się wyświetłał na prawo od loga tak jak w pełnym trybie.