0

es mi primera intervencion en Stack Overflow. Es para poder realizar una consulta con respecto a un asunto que me tiene trabado. No se como lograr un efecto similar al que posee esta pagina (https://redlichs.com.au/) en la parte que dice "Our priority is you". Estoy queriendo hacer algo similar pero al ir encogiendo la pantalla tanto el texto como la imagen se van achicando. Quiero que la imagen quede fija y que el texto no se vaya rompiendo a medida que va achicandose. Esto es lo que tengo armado hasta el momento.

.presentacion__frase {
display: inline-block;
flex-flow: wrap;
text-align: left;
align-items: center;
position:absolute;
bottom: 45%;
left: 10%;
font-size: 270%;
font-family:'Open Sans';
color:white;

}

De esta forma el texto me queda como quiero que quede siempre pero sin embargo a medida que voy encogiendo la pantalla se destruye. Quedo abierto para brindar mas informacion si es necesario. Saludos!

5
  • Por favor, bríndanos más información! Pon el HTML de ese texto para ver como lo quieres en la pregunta. O mírate directamente las unidades que puedes usar para el font-size en este enlace y pruébalas a ver cual te convence. Por ejemplo, en ese sitio web usan una mezcla de media queries segun la resolución del dispositivo conjuntamente con unidades rem.
    – masterguru
    Commented el 18 may. 2022 a las 5:51
  • Aparentemente podría ser un Div de fondo u otro elemento con un background-img, un background-size: cover y quizás un background-repeat: no-repeat, luego en general no es una buena práctica utilizar porcentajes para los textos, suele usarse REM por muchas razones.. Por último en la página de ejemplo hay varios cambios en los cuales utilizan seguramente media queries, es decir el texto se muestra en diferente posición y tamaño en función del tamaño de pantalla, concuerdo totalmente con masterguru, quizás con un poco más de información nos podría ser más fácil ayudarte. Commented el 18 may. 2022 a las 6:03
  • Para que el texto no se reduzca usa rem, em o px en vez de porcentajes. Para que la frase no se rompa usa white-space: nowrap y para que las imagenes no se redimensionen usa medidas absolutas como en el texto en las prop width y height. Commented el 18 may. 2022 a las 12:30
  • @LuisS.Romero tu respuesta ha sido clarificadora. Era esto lo que necesitaba. Además me llevo como buena practica dejar de usar los porcentajes. Con respecto a los media queries si bien los tenia pensados mi pregunta iba orientada al efecto que se logra con la propiedadad background-image. Muchisimas gracias por el aporte! Commented el 20 may. 2022 a las 22:24
  • Siempre es un placer ayudar! Hasta la próxima! Commented el 20 may. 2022 a las 23:13

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.