Oi @albertoanetto, você fala da foto que tem as 4 pessoas, certo? Neste caso, você tem um dilema. para que a imagem não fique “cortada”, você teria que reduzí-la proporcionalmente, ou seja, ela teria que continuar uma imagem horizontal. Mas como tem um texto dentro do banner, se a imagem for proporcional, o texto não vai caber.
Minha sugestão, é um meio termo: você pode usar CSS para deixar a imagem menos vertical, e fazer o texto ocupar menos espaço. Basta inserir o código abaixo em Personalizar > CSS personalizado (ou no CSS do seu tema, se souber como fazer isso direito):
@media( max-width: 767px) {
.slider > .item {
max-height: 60vh;
}
.slider .format-standard {
width: auto;
left: 0;
margin: 15px;
}
}
Com isso, a imagem vai ficar menos vertical, no meu teste apareceram 2 pessoas da foto sem ficarem cortadas. Se precisar mudar a proporção, basta mudar onde está com 60vh para um valor menor.
Oi @anyssa , primeiramente, muito obrigado pela ajuda e por se mostrar solícita!
Estamos quase próximos de um “happy ending”.
Usei essa linha de código:
/*Smartphone*/
@media (max-width:480px){
.slider > .item{
height: 25vh !important;
}}
/*Tablet*/
@media (max-width:720px){
.slider > .item{
height: 45vh !important;
}}
No entanto, ainda falta ajusta de uma melhor maneira para smart, tem alguma sugestão?
E novamente, meu muito obrigado!
Esta parte do código adapta a caixa de texto para caber melhor dentro da imagem:
.slider .format-standard {
width: auto;
left: 0;
margin: 15px;
}
Você pode ajustar o valor da margem se quiser mais espaço. Se ainda assim o texto ficar para fora, aumente um pouco a altura do slider de 25vh para 30vh por exemplo.
@anyssa essa linha que me compartilhou coloco abaixo daquela que te mostrei?
desculpe-me pelas perguntas, é que realmente, praticamente nada sei de WP.
inclusive, se quiser, te passo login e senha, para dar uma olhada mais claramente.
preciso encontrar uma proporção que alinhe devidamente todos os meios.
e de novo, muito obrigado =D
Oi, desculpe a demora em responder. Sem problemas, normal ter dúvidas mesmo. Isso, você coloca na parte relativa ao smartphone. Seu código ficaria assim:
/*Smartphone*/
@media (max-width:480px){
.slider > .item{
height: 25vh !important;
}
.slider .format-standard {
width: auto;
left: 0;
margin: 15px;
}
}
/*Tablet*/
@media (max-width:720px){
.slider > .item{
height: 45vh !important;
}
}
@anyssa boa tarde, mais uma vez, muito obrigado por se mostrar solícita.
porém, tenho bad news, a imagem ainda não está encaixando, portanto, que alteração ou o que me sugere fazer?
fiz teste em vários dispositivos móveis e só em poucos ela se encontra normal.
(o teste realizei pelo http://www.codeorama.com/responsive/?u=www.pedromirandacardio.com.br)
Pode tentar mudar a unidade de medida da altura da imagem. Em vez de vh, teste com vw. Aí ficaria assim:
.slider>.item {
height: 45vw !important;
}
@anyssa tivemos progressos substanciais, fiquei feliz, duas dúvidas:
em qual parte do código mexe na largura? (queria esticar para ambos os lados)
e por que em alguns dispositivos móveis a configuração não é adequada?
(em uns 3/4 que consultei pela coderama, apareceu torto)
@anyssa boa tarde, mudei de imagem, preciso aumentar a altura, pois uma parte na parte superior está cortada, gentilmente, pode informar o que posso mudar no código?
pra ver melhor, entre no site http://www.pedromirandacardio.com.br
(notará uma parte acima do monitor do notebook cortada).
@anyssa este é o código atual:
/*Smartphone*/
@media (max-width:480px){
.slider > .item{
height: 30vh !important;
}
.slider .format-standard {
width: auto;
left: 0;
margin: 15px;
}
}
/*Tablet*/
@media (max-width:720px){
.slider > .item{
height: 40vh !important;
}
}
e preciso ajustar desktop e tablet, pois ambos estão com a imagem cortada, que ajuste me sugere?
Obrigado desde já =)
Agora só resta testar os valores do height para ver se faz alguma diferença, ou então mudar a unidade de medida, como disse na resposta anterior.
Fora isso, não há muito o que fazer. Na verdade é completamente normal que uma imagem corte em telas menores. Normalmente são escolhidas fotos onde os elementos importantes estão mais no centro, para evitar que o corte esconda algo importante.
@anyssa bom dia, agora o problema é outro, de telas menores acho que estou conseguindo ajustar.
a imagem de desktop aparece cortada, em qual código ou por qual código eu consigo mexer na altura dela?
Oi @albertoanetto
No meu tamanho de tela não parece estar cortado. De qualquer forma, o código seria algo do tipo:
/*Tablet*/
@media (min-width:1200px){
.slider > .item{
height: 60vw; !important;
}
}
