I am having trouble with my font size using css & html. Whether I use relative or absolute size units, it displays my "p" tags (all except bolds in photo) with different sizes when I use display: flex.
If I comment flex styles, all p tags get back to the same size, but my layout won't get de style I want. (I know, it isn't fixed at all right now, but I just started this).
HTML like:
<section id="PruebasCover"> <div id="PruebasCoverContainer"> <h1>Pruebas Para <br> Covid-19</h1> <p>Certificadas por la <b>COFEPRIS</b>, <b>INDRE</b> y <b>FDA</b></p> <p> - Cualitativas (GENRUI y Abbott) <br> - Cuantitativas (IChroma) <br> - PCR <br> - Antígeno </p> </div> <div id="PruebasCoverBotonesContainer"> <a href="#" class="Button">Contacto</a> <a href="#" class="EmptyButton">Ver más</a> </div> </section> <section id="QuienesSomos"> <img src="https://i.pinimg.com/736x/77/82/3f/77823f938e6a246ab82fc1207c27908b.jpg"> <img src="SVG/Arrow.svg" class="arrow"> <div> <h2> ¿Quienes Somos? </h2> <p> Somos una empresa mexicana líder en el sector salud y distribución de insumos médicos, conformada por un equipo multidisciplinario especializados en brindar atención médica personalizada y asesoramiento corporativo. </p> <a href="#" class="EmptyButton"> Leer más </a> <div id="nosotrosNumsContainer"> <div class="nosotrosNums"> <img src="SVG/Dropper.svg" class="nosIcon"> <span> <h2>400+</h2> <p>Clientes</p> </span> </div> <div class="nosotrosNums"> <img src="SVG/Doctor.svg" class="nosIcon"> <span> <h2>20+</h2> <p>Médicos Especialistas</p> </span> </div> </div> </div> </section> And messed up CSS:
h1 { font-weight: 550; font-style: normal; font-size: 8vw; color: rgb(30,30,30); } h2 { font-size: 6vw; color: rgb(40,40,40); } h3 { font-size: 4vw; color: rgb(40,40,40); } p { font-weight: 407; font-style: normal; font-size: 100%; font-size: 16px; color: rgb(40,40,40); } h1, h2, p { text-align: left; } #PruebasCover { background-color: rgba(170,208,198,0.24); /*display: flex; flex-direction: column; justify-content: center;*/ } #PruebasCover h1, p { margin: 0px; padding: 0px; margin: 0vw 0vw 0vw 0vw; } #PruebasCover h1 { margin-bottom: 2vh; } #PruebasCoverContainer { padding: 15vh 0vh 5vh 0vh; } #PruebasCoverBotonesContainer { width: 60vw; margin: 5vh 10vw 5vh 10vw; /*display: flex; flex-direction: row; justify-content: space-between;*/ } #PruebasCoverBotonesContainer a { } .arrow { width: 10vw; } .EmptyButton, .Button { padding: 18px 40px; font-size: 2.5vw; text-decoration: none; text-transform: uppercase; border-radius: 50px; display: block; } .EmptyButton { border: 2px rgb(0,163,163) solid; color: rgb(0,163,163); } .Button { background-color: rgb(0,163,163); border: 2px rgb(0,163,163) solid; color: white; } #QuienesSomos { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 80vw; margin-left: 10vw; } #nosotrosNumsContainer { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .nosotrosNums { display: flex; flex-direction: row; } .nosotrosNums p, h2 { padding: 0px; margin: 0px; } .nosIcon { width: 10vw; margin-right: 4vw; } Result: Displayed screen, all texts are "p" tags, even though they have all different sizes
Thanks for your help :)
https://stackoverflow.com/questions/65912619/why-css-font-size-change-when-using-display-flex January 27, 2021 at 11:44AM
没有评论:
发表评论