[Résolu] Remonter un texte h2 pour le rapprocher du h1

Il faut au moins le code source (avec le CSS) pour le corriger

Bonjour kerlutinoes,
Voici les CSS :

.hsContent h1  {
	color: #000000;
	font-size: 10vw;
}
.hsContent h2  {
	color: #000000;
	font-size: 3vw;
	line-height: 3,5vw;
	margin-bottom: 150px;
}

et le html :

 	  <section id="top">

	        <section id="slide-1" class="homeSlide">
	        	<div class="bcg" 
	        		data-center="background-position: 50% 0px;" 
	        		data-top-bottom="background-position: 50% -100px;" 
	        		data-anchor-target="#slide-1"
	        	>
		        	<div class="hsContainer">
			    		<div class="hsContent">
				    		<h1>Simple</h1>
                            <h2>great for story telling websites.<br>
bo lboblboblbo</h2>
			    		</div>
		        	</div>
	        	</div>
		    </section>

Merci beaucoup, bonne journée,
ED

En rajoutant un :

line-height: 0vw;

au h1, ça va mieux (!?) mais c'est pas parfait...

Bonjour,
je crois que tu pourrais déjà simplifier de la façon suivante :

<h1 class="hsContent">Simple</h1>

idem pour <h2>
Par ce qu'en principe, on ne stylise pas les balises h1....hn. On y colle une class à qui l'on applique ce que l'on veut.
Pour ce qui est de resserrer/rapprocher deux textes, je suppose que ce sont les deux titres dont tu parles ? Il faut mettre sur les class des titres des margin top ou bottom pour réduire l'écart entre elles.
Le BA-BA sur les @media se trouve et s'étudie très facilement, deux exemples parmi des centaines :
https://www.alsacreations.com/article/lire/930-css3-media-queries.html
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1607616-utilisez-le-responsive-design-avec-les-media-queries
On ne trouve pas "de tout" sur le net, il faut utiliser celles qui vont. Il faut d'abord étudier un peu leur fonctionnement et ensuite partir sur un projet.

N'hésites pas à préciser ce que tu veux.
Modifié par Bongota (23 Dec 2021 - 13:49)

Merci beaucoup Bongota pour tes conseils!
J'ai tenté avec les marges mais elles ne prennent pas en compte les valeurs négatives (de mémoire, je ne peux pas tester actuellement).
Je reste donc bloqué Soyons fous : admettons que je veuille que le h2 passe au dessus du h1. Comment faire ? Deux div ?
Pour ce qui est des Média Queries, merci pour ton lien (mis à jour très récemment). L'article est riche
Bon après-midi,
ED

Pourtant, sans marges négatives, voici ce que j'ai obtenu :

Avec ce css :

.hsContent  {
	color: #000000;
	font-size: 10vw;
	margin-bottom:0em;}
.hsContent2  {
	color: #000000;
	font-size: 3vw;
	line-height: 3,5vw;
	margin-top:1em;
	margin-bottom: 150px;

C'est du vite fait, mais l'idée est là.
Modifié par Bongota (23 Dec 2021 - 14:21)

:D
Oui justement, je trouve qu'il y a trop d'espace
Mais merci beaucoup de te pencher sur mon problème.
ED

Bonsoir :

.hsContent h1  {
  font-size: 10vw;
  margin-bottom: 0;
}
.hsContent h2  {
  font-size: 3vw;
  margin-top: 0;
}

Exemple en ligne avec un CodePen

el_debutanti a écrit :
Soyons fous : admettons que je veuille que le h2 passe au dessus du h1. Comment faire ?

.hsContent {
  display: flex;
  flex-direction: column;
}
.hsContent h2  {
  order: -1;
}

Problème résolu