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...

Lucky13

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....

❶ Feuille de style introuvable ❷ Chemins relatifs et absolus ❸ addEventListener & API Selectors ❹ Paletton colors ❺ Animations complexes en JS & CSS

Elsatix

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... :/

Mewen_bzh

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...

Je ne réponds pas aux messages privés.

Elsatix

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...

Elsatix

10 avril 2018 à 14:19:57

Elsatix

14 mai 2018 à 9:16:21

Toujours personne pour m'aider ?

PaulTanné

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?

philiga

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)

Elsatix

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