Partage

Proportions résolutions écrans

8 avril 2018 à 11:51:21

Bonjour,

Alors voilà, j'arrive pas à savoir ce qui coince dans mon css, mon site ne s'adapte pas à la largeur de l'écran... je mets la majeure partie du CSS pour que vous puissiez m'aider...

@font-face {
    font-family: 'milkshakeregular';
    src: url('polices/milkshake-webfont.woff2') format('woff2'),
         url('polices/milkshake-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'josefin_sansregular';
    src: url('polices/josefinsans-regular-webfont.woff2') format('woff2'),
         url('polices/josefinsans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/*IMAGES DE FOND*/
body
{
    background: url("images/fond.jpg") fixed;
}

/*POLICE DE LA PAGE*/
body
{
    font-family: 'josefin_sansregular', Arial, "Arial Black", Verdana, sans-serif;
}

/*BLOC PAGE*/
#bloc_page
{
    width: auto;
    margin: auto;
    display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body 
{
	display: flex;
	margin: auto;
}

.site-content {
	flex: 1;
}

/*HEADER*/
header
{
	display: flex;
	justify-content: center;
	margin-top: 40px;
	margin-bottom: 35px;
	margin-left: auto;
	margin-right: auto;
	width: 1000px;
}

/* NAVIGATION */
nav ul
{
    list-style-type: none;
    display: flex;
    justify-content: center;
    background: url('images/barre.png'), no-repeat top center;
    margin-top: 10px;
    margin-bottom: 0px;
    align-items: center;
    padding-left: 0px;
}

nav li + li::before 
{
    content: "|";
    float: left;
    line-height: 23px;
    color: #000000;
    margin-left: 50px;
    margin-right: 50px;
}

nav li
{
    margin-bottom: 5px;
    margin-top: 5px;
    text-align: center;
}

nav a
{
    font-size: 1.3em;
    padding-bottom: 5px;
    text-decoration: none;
}

nav a:hover
{
    border-bottom: 3px solid;
}


/* LIENS par défaut (non survolés) */
a 
{
   text-decoration: none;
   color: black;
}

a:hover /* Apparence au survol des liens */
{
   text-decoration: underline;
   color: teal;
}

/*COULEUR, TAILLE, POSITION DU TITRE PRINCIPAL*/
h1
{
	color: black;
	font-size: 4.2em;
	text-align: center;
	font-family: 'milkshakeregular', Arial;
	margin-top: 25px;
}


/*COULEUR ET TAILLE DU SOUS-TITRE*/
h2
{
	color: black;
    width: 50%;
    min-width: 550px;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
}	

/*COULEUR ET DIMENSIONS DES PARAGRAPHES*/
p, .criteres
{
    color: black;
    width: 50%;
    min-width: 550px;
    text-align: justify;
    margin-left: auto;
    margin-right: auto;
}	

/*STRONG*/
strong
{
	font-weight: bold;
	color: cornsilk;
}

/*IMAGE IPHONE*/
#iphone
{
	text-align: center;
    display: block;
    width: 350px;
    margin: auto;
    margin-bottom: 20px;
}

/*BOUTONS DOWNLOAD*/
#boutons
{
	display: flex;
	margin: auto;
	justify-content: center;
	align-items: center;
}
#boutons div
{
	margin: 10px;
}


/*FORMULAIRE*/
textarea
{
	width: 548px;
	height: 200px;
	margin: auto;
}

fieldset
{
	width: 536px;
	margin: auto;
}

form
{
	margin: auto;
}

Jusque cette taille ça va 

et ensuite...

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
8 avril 2018 à 13:56:39

Hello,

Ton header est déclaré comme taille fixe de 1000px pour un display flex ..?

A moins que tu es utiliser des media-queiries par la suite....

8 avril 2018 à 21:44:47

Hey,

Alors non, je n'ai pas rajouté de media-queries pour l'instant, j'essaie déjà de résoudre ce problème..

Mais même lorsque j'enlève ça, ça ne change rien... :/

9 avril 2018 à 9:08:01

Bonjour,

Difficile de répondre précisément sans voir ton HTML, on ne sait pas à quel élément s'applique telle ou telle propriété. On ne sait même pas si tu as bien pensé à ajouter une balise meta viewport...

Recherche l'avis de développeurs front : Devenir un meilleur dev front ?
9 avril 2018 à 14:05:23

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="style.css" />
        <title>Mon site - Contact.</title>
    </head>

    <body>
      <div id="bloc_page">
            <header>
                 <a href="code.html"><img src="images/banniere.png" alt="banniere du site"></a>
            </header>
            </header>
     <main class="site-content">
      <h2> Un souci ? Une suggestion ?</h2> 

      <p> 
        Vous ne comprenez pas le fonctionnement du site ? <br>
        Vous voulez nous sugérer une modification ? <br>
        Vous voulez signaler un utilisateur ? 
      </p>

      <p> 
       Vous pouvez nous joindre par mail ici : <a href="mailto:xxxxxx@gmail.com">XXXXXX@gmail.com</a> <br>
       Sur les réseaux sociaux, ou directement via le formulaire de contact ! 
      </p> 

<form method="post" action="traitement.php">
   <fieldset>
       <legend>Vos coordonnées</legend> 

       <label for="nom">Nom</label>:
       <input type="text" name="nom" id="nom" required/>

       <label for="prenom">Prénom</label>:
       <input type="text" name="prenom" id="prenom" required/>
 
       <label for="email">E-mail</label>:
       <input type="email" name="email" id="email" required/>
   </fieldset>
  
       <p> <label for="message">Message</label> : <br />
       <textarea name="message" id="message"></textarea> </p>

       <p> <input type="submit" value="Envoyer" /> </p>
</form>
      

     </main>
      <footer>
         <nav>
            <ul>
                <li><a href="code.html">ACCUEIL</a></li>
                <li><a href="apropos.html">A PROPOS</a></li>
                <li><a href="contact.html">CONTACT</a></li>
            </ul>
         </nav>
      </footer>
     </div>
    </body>
</html>

Voilà le code...
14 mai 2018 à 9:16:21

Toujours personne pour m'aider ? :D
14 mai 2018 à 9:54:36

Yo, 

Je vois pas trop ou est le soucis, niveau responsivité je suis bon jusqu'a ce que j'arrive a une largeur de 200px, mais c'est dur de trouver un ecran de cette taille...Apres j'ai modifié juste un peu ton fieldset, mais quand est ce que tu as ce probleme de largeur? 

14 mai 2018 à 10:37:51

Bonjour,

Tu as cloturé 2x ton </header> ligne 15.

Sinon, supprime le display:flex; sur body ; inutile puisque tu as une div id="bloc_page" qui contient tout et qui empêche le centrage de celle-ci tant que sa width est en auto.

-
Edité par philiga 14 mai 2018 à 10:38:19

"La Vérité doit être dite, le monde dût-il en voler en éclats"  (J. G. Fichte)
15 mai 2018 à 15:29:24

Yesss merci ! Ce qui me gênait c'était que quand je réduisais la page, le formulaire ne se recentrait pas en fonction de. ^^

Ca m'a l'air good maintenant, merci ;)

Proportions résolutions écrans

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown