How it looks when title isn't wrapping(all good)
When the screen is thinner and the title wraps
As you can see it clashes with the h3 title ("S2")
I am quite new to coding, currently learning. There should be a way to make the h3 maintain distance related to the lower part of the text above instead of staying the same distance in relation to the original margin.
I could just create a mediaquery for that screen width but I feel like there should a better solution.
Here is the relevant html snippet:
<h1>Las 8 Funciones</h1><div class="contenedor"><section class="caja funciones percepcion"><h2> Funciones de percepción</h2><article><div class="funcion sensorial extrovertida"><h3>Se</h3><p>- Principales representantes: ESFP/ESTP (Notable en: ISFP/ISTP)</p><p>- Descripción: Se concentra en las experiencias y sensaciones del mundo físico presente. Es muy consciente de su entorno y busca la acción y la aventura. </p><p>- Foco: 5 sentidos y tiempo presente</p></div><picture><source media="(min-width:)" srcset=""><img src="https://live.staticflickr.com/65535/53794043780_9f18208005_m.jpg" width="239" height="240" alt="muchacho haciendo truco de skateboard"></picture></article>I tried playing with the margin but I noticed that the margin doesn't wrap along the text, the margin always begins from the original unwrapped content even when the content is wrapped