Cabeçalho sensível ao tamanho da fonte

Um usuário perguntou ?

Oi, alguém poderia me ajudar com um CSS personalizado e responsivo? Sou aprendiz nesta empresa de mídia na Holanda e preciso tornar este site responsivo, funcionou para conteúdo, mas naturalmente não posso definir tamanhos responsáveis para manchetes. http://www.degoudgelepatat.nl seu telefone ficou surpreso ao usá-lo para o tema Rosa. O título que quero mudar é chamado de “article__headline”. A fonte deve ser alterada para 65px em um celular e 79px em um tablet

@Addwebsolution uma vez postou isso online

https://wordpress.org/support/topic/changing-site-title-font-size-keeping-responsive-properties/

@media screen and (min-width: 48em) {
.wrap {
max-width: 1040px;
}
}
@media screen and (max-width: 800px) {
.site-title {
font-size: 1.6rem;
}
}
@media screen and (max-width: 480px) {
.site-title {
font-size: 1rem;
}
}

Não estou muito familiarizado com CSS responsivo.

Obrigado antecipadamente!

Este tema foi modificado há 3 anos, há um mês.

(@ dimitris33)

3 anos, 1 mês atrás

Oi, o nome da classe é “article_headline”? Está na capa?

(@ dimitris33)

3 anos, 1 mês atrás

Eu achei que era ‘article__headline’ e é uma espécie de rótulo

Isso. Eu acho que você quer mudar a fonte h2. Você pode tentar algo assim.


@media screen and (max-width: 800px) {
.article__headline h2 {
 font-size:79px;
 }
}
@media screen and (max-width: 480px) {
.article__headline h2 {
 font-size:56px;
 }
}

coloque este código na parte inferior do seu estilo.css e arquivos ctrl+f5 para ver a versão atualizada do estilo.

Esta resposta foi modificada há 3 anos, há um mês.

(@mextro)

3 anos, 1 mês atrás

Obrigado, Dimitri trabalha, acho que pode modificá-lo um pouco para fazer-lo funcionar em ambos os títulos. ?

(@mextro)

3 anos, 1 mês atrás

Mude isso e agora está perfeito! Muito obrigado amigo

@media screen and (max-width: 800px) {
.article__headline h2 {
 font-size:79px;
padding-bottom: 30px
 }
}
@media screen and (max-width: 480px) {
.article__headline h2 {
 font-size:65px;
	padding-bottom: 30px
 }
}

@media screen and (max-width: 800px) {
.article__headline h1 {
 font-size:30px;
 }
}
@media screen and (max-width: 480px) {
.article__headline h1 {
 font-size:20px;

 }
}

(@ dimitris33)

3 anos, 1 mês atrás

sár ?

Resolveu seu problema?

0/0

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *