5546 sujets

Sémantique web et HTML

Affichage sur mobile

Bonjour,

Je viens de récupérer une page web créée pour un évènement scientifique. A priori tout semble plutôt bien fonctionner. Malheureusement, la bannière de menu est coupée et rend le site totalement inutilisable.

Le code inclut bien 
<meta name="viewport" content="width=device-width, initial-scale=1" />
, mais cela ne semble pas suffisant.

Savez d'où cela peut venir et comment résoudre ce problème ?

Merci de vos réponses,
Olivier

Le code est le suivant :
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Games </title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div id="wrapper">
        <div class="header">
            <h1>Workshop on Games:</h1>
            <h2>22-23 May 2019</h2>
        </div>


        <div class="nav">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="speakers.html">Speakers</a></li>
                <li><a href="program.html">Program</a></li>
                <li><a href="abstracts.html">Abstracts</a></li>
                <li><a href="venue.html">Venue</a></li>
                <li><a href="hotel.html">Hotel</a></li>
                <li><a href="registration.html">Registration</a></li>

            </ul>
        </div>


        <div class="main">
          
            <p>[....]</p>



            <h4>Organizers</h4>

        </div>


        <footer>

            <div id="sponsors">
                <!--    <h5>This workshop is financed by</h5> -->
                <h5>Financial support</h5>
            </div>
    </div>
    </footer>

    </div>

</body>

</html>

Modifié par obos (28 Mar 2019 - 17:49)
Salut,

oui bien sûr.

Le voilà:


/* Fonts from Google Fonts - more at  https://fonts.google.com  */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

/*All pages*/


h1 {
    font-family: "Merriweather", serif;
    font-size: 28px;
}


h2 {
    text-align: center;
}

h3 {
    text-align: left;
}

h4 {
    text-align: left;
}

h5 {
    text-align: center;
}

h6 {
    text-align: left;
}

h7 {
    text-align: right;
}

p {
    font-size: 12px;
    text-align: justify;
}


body {

    background-color: #b7bbbc;
    font-family: "Open Sans", sans-serif;
    width: 100%;
    padding: 40px 40px;
    font-size: 16px;
    color: #444;
}


#wrapper {
    background-color: white;
    width: 100%;
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 40px;
}


.header {
    text-align: center;
    padding: 5px;
}

.nav {
    background-color: #58696d;
    height: 40px;
    margin-bottom: 15px;
    padding-left: 50px;
    padding-right: 50px;
    max-width: 100%;
}

.nav ul li {
    float: left;
    list-style: none
}

.nav ul li a {
    line-height: 40px;
    display: block;
    padding: 0 10px;
    font-size: 20px;
    color: #ffffff;
    max-width: 100%;
}

.main {
    background: #f8f9f6;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 40px;
}


#sponsors img {
    display: inline;
    flex-wrap: wrap;
    justify-content: center;
    max-height: 100px;
    max-width: 300px;
    padding-left: 20px;
    padding-right: 20px;
}


/*Home page */

#introduction p {
    font-size: 14px;
}


img {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 100%;
    margin: auto;
    margin-bottom: 20px;
}


*/ #organizers h2 {
    font-size: 20px;
}


#organizers h3 {
    font-size: 15px;

}

#organizers {
    text-align: left;
}


/* speakers */

#speakers a {
    font-size: 15px;
}

#speakers p {
    font-size: 12px;
}

#speakers table {
    padding-bottom: 20px;
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

#speakers table a,
p {
    margin-left: 20px;
    margin-right: 20px;
}

#speakers table a {
    margin-top: 60px;
    margin-bottom: 2px;
}

#speakers table p {
    margin-top: 1px;
    margin-bottom: 20px;
    text-align: left;
}


/*venue */

#transport h5 {
    text-align: left;
}

#transport a,
p {
    font-size: 14px;
}

#transport img {
    float: right;
}
Sujet clos
Aller à