18041 sujets

Questions générales et questions de débutants

[Résolu] Header responsive

Bonjour,

Je suis coincée sur un truc très bête.

Je suis au tout début de la création d'un site, la bannière sera toute simple.

Mais elle ne fonctionne pas, elle n'est pas responsive, alors que j'utilise Bootstrap 4.3, elle ne s'adapte pas à la taille de l'écran.


<header>
            <div class="container-fluid">
                <div class="row">
                    
                    Mon texte de bannière
                    
                </div>                
            </div>
        </header>


et le css

header {    
    height: 250px;
    font-family: 'Allura', cursive;
    background-color: #616B61;
    color: white;    
    font-size: 125px;
    text-align: center;
    line-height: 250px; /* hauteur de ligne (identique) */
    white-space: nowrap;    
}


qu'est-ce que je fais mal ?

D'avance merci pour vos éclairages
Modifié par Thia (22 Jun 2020 - 10:56)
salut,

Peut être l'import du CSS ?

peux-tu mettre l'ensemble de ton code ?
Modifié par biduletruck (22 Jun 2020 - 11:01)

<html lang="fr-FR">
    <head>
        <title>Mon site</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Site officiel de la commune de Rizaucourt-Buchey">
        
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>        
        
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
        
        <link rel="stylesheet" href="css/styles.css">
        
        <!-- Police d'écriture pour la bannière -->
        <link href="https://fonts.googleapis.com/css2?family=Allura&display=swap" rel="stylesheet">
    </head>
    <body>
        <header>
            <div class="container-fluid">
                <div class="row">
                    
                    Ma bannière
                    
                </div>                
            </div>
        </header>
        <section>
            
        </section>
    
        <footer>
            
        </footer>
    </body>
</html>


Edit : et en plus mon texte n'est plus centré en largeur Smiley decu
Modifié par Thia (22 Jun 2020 - 11:19)
Il te manque une classe après ton row:
ps: j'ai ajouté le jumbotron pour avoir une visu du résultat

        <header class="container-fluid">
		<div class="row">
			<div class="col">
                    		<div class=jumbotron>Ma bannière</div>
			</div>
                </div>
        </header>
j'ai rajouté la div class "col" et une div pour mon texte. Et en effet c'est centré en longueur

Mais ça ne fonctionne toujours pas : c'est responsive, jusqu'à ce que j'arrive au texte. Si je réduis en-dessous de la longueur du texte, alors le texte est tronqué.

Edit : c'est peut-être pas possible.
Peut-être qu'il faudrait faire une bannière sur Paint ou un truc de ce genre.
Le problème c'est ma police d'écriture. Je ne vais pas savoir l'utiliser en-dehors du Css
Modifié par Thia (22 Jun 2020 - 11:54)
Super merci biduletruck Smiley loveu

J'ai fait la 1ère solution proposée, un peu long mais comme ça j'ai pu régler aussi la hauteur et le line-height.
Bref, OSEF, ça marche, j'ai une jolie (très simple, mais jolie) bannière
Sujet clos
Aller à