HTML problema viewport / testi - immagini

ziodilo · 5 Aprile 2020

Ciao!

Ho un problema con gli elementi del sito che sto progettando, in particolare con testi e immagini.
In sostanza ho creato un elemento "id" a larghezza 1280px (in pratica un contenitore più ristretto rispetto alla pagina) dentro il body su cui poi ho sviluppato tutta la pagina iniziale.
Se provo a restringere la pagina però gli elementi non si adattano più alla dimensione del viewport.
In precedenza invece, prima di creare il "contenitore id" non c'era problemi.

Magari è una bischerata ma non trovo una soluzione..

grazie in anticipo!

Dazorn · 7 Aprile 2020

ziodilo ha detto:
Ciao!

Ho un problema con gli elementi del sito che sto progettando, in particolare con testi e immagini.
In sostanza ho creato un elemento "id" a larghezza 1280px (in pratica un contenitore più ristretto rispetto alla pagina) dentro il body su cui poi ho sviluppato tutta la pagina iniziale.
Se provo a restringere la pagina però gli elementi non si adattano più alla dimensione del viewport.
In precedenza invece, prima di creare il "contenitore id" non c'era problemi.

Magari è una bischerata ma non trovo una soluzione..

grazie in anticipo!

Potresti mettere il codice HTML e CSS?
Grazie

ziodilo · 7 Aprile 2020

HTML:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title></title>
      <link href="mediaquery_desktop.css" rel="stylesheet">
      <link href="mediaquery_tablet.css" rel="stylesheet" />
      <link href="mediaquery_mobile.css" rel="stylesheet">
   </head>
   <body>
      <div id="main">
         <!-- "CONTENITORE SU CUI HO SVILUPPATO LA PAGINA INIZIALE"-->
         <a href="" target="_blank">
            <section>
            <section class="boxlezioni">
               <p>LEZIONI</p>
            </section>
         </a>
      </div>
   </body>

CSS:

body {
    margin: 0 auto;
    background-color: black;
}

@media only screen and (min-width:768px) {
    #main {
        width: 1280px;
        margin: 0 auto;
    }
}

.boxlezioni {
    background-image: url('image/img desktop/lezioni.jpg');
    background-position: center;
    width: 100%;
    height: 300px;
}

.boxlezioni p {
    letter-spacing: 2px;
    color: white;
    border: 1px solid white;
    padding: 10px;
    font-size: 70px;
    display: inline-block;
    margin-top: 170px;
    margin-left: 50%;
}

Cerca

HTML problema viewport / testi - immagini

ziodilo

Dazorn

ziodilo

DISCUSSIONI SIMILI