Адаптивный макет проблема с макетом при сжатии, медиа-запрос и сетка - PullRequest
Новая
       24

Адаптивный макет проблема с макетом при сжатии, медиа-запрос и сетка

0 голосов
/ 11 октября 2019

Я пытаюсь сделать так, чтобы столбцы переходили с 2 на 1 внутри содержимого страницы, когда я уменьшал его до размера планшета или телефона с помощью медиазапроса.

Предположим, что отступление под контентом, когда сайт сокращается, так что все будет попадать под каждый объект. На данный момент ничего не происходит с медиа-запросом, и все просто сходится, когда я пытаюсь сжать сайт.

Я пытался использовать W3Schools для получения дополнительной информации, но, похоже, это не работает. 

*{ box-sizing: border-box; margin: 0px; 
}

body {
    height: 70%;
    width: 90%;
    padding: 0.5em;
    margin: auto;
    font-family: "Times New Roman", Times, serif;
    background: #CCFFFF;

}

img.align-left {
    float: left;
    margin-right: 2em;}

img.medium {
    width: 30%;
    height: 30%;}

img.small {
    width: 20%;
    height: 20%;}

a:link {
  background-color: #6699cc;
  color: white;
  padding: 0.1em 0.1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:visited {
    color: #0B6623;
}

a:hover, a:active {
  background-color: #01579B;
}

a{
    cursor: pointer; 
}

table {
    table-layout: fixed; 
    width: auto;
}


#page {
    min-height: 70%;
    min-width: 90%;
    margin: 1em auto 1em auto;
    z-index: auto;
    background: #CCCCFF;
}

header {
    position: sticky;
    top: 0.1em;
    height: 20%;
    padding: 2em;
    border: 0.25em;
    border-color: gray;
    border-style: dotted;
    border-width: thick; 
    z-index: 5;
    background-color: #CAE9F5;
    margin: auto;
    visibility: visible;
    min-width: 95%;
    max-width: 100%;
    clear: both;
}

nav {
    height: 2em;
    z-index: auto;
    display: inline;
}

#content { 
    position: relative;
    float: left;
    left: 1em;
    padding: 1em;
    z-index: auto; 
    width: 60%;
    max-height: 40%;
    max-width: 65%; 
    min-height: 40%;
    min-width: 65%; 
    vertical-align: baseline;
    margin: auto;
    overflow: auto;
    column-count: 2;
    column-width: 25%;
    background-color: green;
}

aside {
    position: relative;
    float: right;
    right: 1em;
    padding: 1em;
    z-index: auto; 
    max-height: 50%;
    max-width: 30%;
    min-height: 50%;
    min-width: 30%;
    vertical-align: baseline;
    margin: auto;
    background-color: red;
}

footer {
    position: relative;
    padding: 0.2em;
    bottom: 1em;
    clear: both;
    z-index: auto;
    margin: auto;
    min-width: 95%;
    max-width: 100%;
    height: 10%;
}

@media only screen and (max-width:480px) {
    /* For mobile phones: */
    .content { 
        column-count: 1;
        column-width: 100%; }

    [class*="col-"] {
    width: 100%;}
}

@media only screen and (min-width: 600px max-width: 767px) {
  /* For tablets: */
    .content{
    column-count: 1;
    column-width: 100%;
  }

  .col-1 {width: 30%;}
  .col-2 {width: 60%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 30%;}
  .col-9 {width: 100%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}

}
<body>
        <div id="page">
            <header>
            <h1>This</h1>
            <nav>
                <a href="index.html">Index</a>
                <a href="home.html">Home</a>
                <a href="this.html">This</a>
                <a href="then.html">Then</a>
                <a href="what.html">What</a>
            </nav>
            </header>

            <div class="col-2">
            <div id="content">
            <figure><img src="images/window.gif" class="align-left medium" alt="New photo"><figcaption>  This is a photo  </figcaption></figure>
                <article><br />
                <h2>Heading 2 </h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra risus quam, et lacinia ante malesuada eget. 
                Morbi erat mauris, rutrum eget tortor vitae, venenatis volutpat odio. Maecenas feugiat mollis est quis sagittis. 
                Etiam vitae lorem ac purus efficitur scelerisque. Integer venenatis magna ante, laoreet efficitur tortor consequat a. 
                Sed a est scelerisque, auctor risus id, tempus nisi. Donec fermentum laoreet ullamcorper. Curabitur pulvinar massa et nisl hendrerit, ut lobortis urna hendrerit.</p>
                <br />
                <p>Vestibulum ac blandit nisl. Curabitur dapibus sem efficitur, molestie sem in, scelerisque velit. Cras quis ex lacinia massa egestas pulvinar in tristique nulla. 
                Vestibulum aliquam a leo sed mollis. Nullam quis dapibus purus. Cras dui urna, cursus eget enim et, dignissim tincidunt turpis. 
                Praesent lacinia, purus eget volutpat euismod, nibh arcu convallis velit, vitae eleifend ligula justo sagittis augue. 
                Duis lobortis nulla in sapien vestibulum, et cursus enim scelerisque. Duis a erat non leo mattis pulvinar finibus at augue.</p>
                    <br />
                    <br />
                </article>

                <article>
                <h4>Heading 2 </h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra risus quam, et lacinia ante malesuada eget. 
                Morbi erat mauris, rutrum eget tortor vitae, venenatis volutpat odio. Maecenas feugiat mollis est quis sagittis. 
                Etiam vitae lorem ac purus efficitur scelerisque. Integer venenatis magna ante, laoreet efficitur tortor consequat a. 
                Sed a est scelerisque, auctor risus id, tempus nisi. Donec fermentum laoreet ullamcorper. Curabitur pulvinar massa et nisl hendrerit, ut lobortis urna hendrerit.</p>
                <br />
                <p>Vestibulum ac blandit nisl. Curabitur dapibus sem efficitur, molestie sem in, scelerisque velit. Cras quis ex lacinia massa egestas pulvinar in tristique nulla. 
                Vestibulum aliquam a leo sed mollis. Nullam quis dapibus purus. Cras dui urna, cursus eget enim et, dignissim tincidunt turpis. 
                Praesent lacinia, purus eget volutpat euismod, nibh arcu convallis velit, vitae eleifend ligula justo sagittis augue. 
                Duis lobortis nulla in sapien vestibulum, et cursus enim scelerisque. Duis a erat non leo mattis pulvinar finibus at augue.</p>>Project work with software engineering, 15hp</li>
                </ul>
                </article>
                </div>
            </div>

        <div class="col-8">
        <aside>
        <h4>Heading 2 </h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pharetra risus quam, et lacinia ante malesuada eget. 
                Morbi erat mauris, rutrum eget tortor vitae, venenatis volutpat odio. Maecenas feugiat mollis est quis sagittis. 
                Etiam vitae lorem ac purus efficitur scelerisque. Integer venenatis magna ante, laoreet efficitur tortor consequat a. 
                Sed a est scelerisque, auctor risus id, tempus nisi. Donec fermentum laoreet ullamcorper. Curabitur pulvinar massa et nisl hendrerit, ut lobortis urna hendrerit.</p>
                <br />
                <p>Vestibulum ac blandit nisl. Curabitur dapibus sem efficitur, molestie sem in, scelerisque velit. Cras quis ex lacinia massa egestas pulvinar in tristique nulla. 
                Vestibulum aliquam a leo sed mollis. Nullam quis dapibus purus. Cras dui urna, cursus eget enim et, dignissim tincidunt turpis. 
                Praesent lacinia, purus eget volutpat euismod, nibh arcu convallis velit, vitae eleifend ligula justo sagittis augue. 
                Duis lobortis nulla in sapien vestibulum, et cursus enim scelerisque. Duis a erat non leo mattis pulvinar finibus at augue.</p>>Project work with software engineering, 15hp</li>
                </ul>
        </aside>
        </div>

        <footer>
        <br />
            <details>
                <summary>Copyright 2019</summary>
                <p> By a person </p>
                <p> Doink!</p>
            </details>
        </footer>

        </div>
    </body>

Вот как это выглядит на рисунке: https://imgshare.io/image/WScnw enter image description here

1 Ответ

0 голосов
/ 11 октября 2019

Да, как говорит Matt.Hamer5, основная проблема в том, что вы используете .content, а не # content.

Но тогда вы также столкнетесь с проблемой, заключающейся в том, что контент имеет фиксированную минимальную и максимальную ширины. Вам нужно будет изменить их.

Как-то так в медиа-запросе: 

#content { 
    column-count: 1;
    column-width: 100%;
    width: 100%;
    max-width: 100%;
}
aside {
    width: 100%;
    max-width: 100%;
}
...