I'd like to fix the change in the position of the element when I change the browser width of the browser width.

Asked 2 months ago, Updated 2 months ago, 1 views

How can I keep my browser in the first page even if I change the width of my browser?

Browser Maximization Status

A state in which changing browser width causes switching

html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <metacharset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <link rel="stylesheet" href="../../tools/style/reset.css"/>
    <link rel="stylesheet" href="./assets/style sheets/style.css"/>
    <title>pc-site</title>
  </head>
  <body>
    <div class="l-wrapper">
      <header class="l-header">
        <img class="l-header__logo"src="./assets/images/logo.png" alt="Logo">
        <nav>
          <ul class="p-nav__menu">
            <lic class="p-nav__list">
              <a href="class="p-nav__button">home</a>
            </li>
            <lic class="p-nav__list">
              <a href="class="p-nav__button">about</a>
            </li>
            <lic class="p-nav__list">
              <a href="class="p-nav__button">access</a>
            </li>
            <lic class="p-nav__list">
              <a href="class="p-nav__button">contact</a>
            </li>
          </ul>
        </nav>
      </header>
      <div class="c-hero"></div>
      <main class="l-main">
        <h1class="l-main__title">PC curriculum</h1>
        <div class="l-contents">
          <section class="p-gallery">
            <h2class="p-gallery__tilte"> Latest work</h2>
            <ul class="p-gallery__menu">
              <lic class="p-gallery__list">
                <img class="p-gallery__photo"src="./assets/images/production_01.jpg" alt="The Sunset and the Sea">
              </li>
              <lic class="p-gallery__list">
                <img class="p-gallery__photo"src="./assets/images/production_02.jpg" alt="Sand Beach and Shell">
              </li>
              <lic class="p-gallery__list">
                <img class="p-gallery__photo"src="./assets/images/production_03.jpg" alt="Sand Beach and Drink">
              </li>
              <lic class="p-gallery__list">
                <img class="p-gallery__photo"src="./assets/images/production_04.jpg" alt="piers">
              </li>
              <lic class="p-gallery__list">
                <img class="p-gallery__photo"src="./assets/images/production_05.jpg" alt="small boat">
              </li>
              <lic class="p-gallery__list">
                <img class="p-gallery__photo"src="./assets/images/production_06.jpg" alt="Sunset sky">
              </li>
            </ul>
          </section>
          <section class="p-selfintroduction">
            <h2class="p-self-introduction__title">Self-introduction</h2>
            <p class="p-selfintroduction__text">
              Lorem ipsum dolor sitamet, connectetur adipising elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.Utenim ad minimum veniam, quisnostrud excitation ullam laboris nis aliquip exea commo code requirement
            </p>
          </section>
        </div>
      </main>
      <footer class="l-footer">
        <div class="c-copyright">
          <div class="c-copyright__inner">
            <p class="c-copyright__text">
              <small>©2019 example.inc</small>
            </p>
          </div>
        </div>
      </footer>
    </div>
  </body>
</html>

css

@charset "UTF-8";

.l-wrapper{
    background-color:#ffffaf0;
}

US>.l-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.l-header__logo{
    width —90px;
    height —90px;
    padding —10px;
}

.p-nav__menu{
    display:flex;
}

.p-nav__list{
    margin-right —40px;
}

.p-nav__button{
    font-size: 150%;
    text-decoration: none;
}

.c-hero{
    height —1000px;
    background-image:url(../images/hero.jpg);
    background-repeat —No-repeat;
    background-size:cover;
}

.l-main__title{
    display:flex;
    justify-content:center;
    padding —130px0px130px0px;
    color:#808080;
    font-size: 250%;
}

.p-gallery {
    color:#808080;
    font-size: 200%;
}

.l-contents{
    display:flex;
    padding-left —60px;
}

.p-gallery__tilte{
    margin-bottom —15px;
    padding —2px0px0px20px;
    border-left —solid8px#ff69b4;
    background:transparent;
    color:#808080;
    font-size: 90%;
}

.p-gallery__menu{
    display:flex;
    flex-wrap:wrap;
}

.p-gallery__photo{
    width: 350px;
    height —250px;
    margin —15px60px0px0px;
}

  .p-gallery {
    width: 400%;
  }

  .p-selfintroduction {
    padding-right —70px;
  }

  .p-selfintroduction__title{
    margin-bottom:30px;
    padding —2px0px0px20px;
    border-left —solid8px#ff69b4;
    background:transparent;
    color:#808080;
    font-size: 190%;
  }

  .p-selfintroduction__text{
    color:#808080;
    font-size: 150%;
    line-height: 35px;
  }

  .c-copyright__inner{
    display:flex;
    justify-content:center;
    padding —100px0px100px0px;
  }

  .c-copyright__text{
    padding —30px50px;
    border —solid2px white;
    background: #6495ED;
    color:#fff;
    font-size: 150%;
    box-shadow —0px0px0px10px#6495ED;
  }

html css

2022-09-30 11:10

1 Answers

If you simply want to maintain a "three-by-2-by-2-by-2-by-2-by-2-by-2-by-2-by-2-by-2-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-by-byAlso, the img element itself expands and contracts automatically when it is 100% relative to its parent element.

.p-gallery__list{
/*   Add*/
  flex-basis —30%;
}
.p-gallery__photo{
/*   width causes the parent element to fit */
  width: 100%;
}

Adjust the flex-basis value according to the margin you want.

Also leave snippets (add images and reset css that won't break the link on the HTML side).Also, please refer to the comments for additional parts of css.)

@charset "UTF-8";

/* reset css*/
/* /* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small, strike, strong, sub, sup, tt, var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embedded, 
figure, figure caption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time,mark,audio,video{
    margin:0;
    padding:0;
    border:0;
    font-size: 100%;
    font —Inherit;
    vertical-align:baseline;
}
/* HTML5 display-role reset for older browsers*/
article, aside, details, figurecaption, figure, 
footer, header, hgroup, menu, nav, section {
    display:block;
}
body{
    line-height:1;
}
ol,ul{
    list-style: none;
}
blockquote,q{
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content:';
    content: none;
}
table{
    border-collapse —collapse;
    border-spacing:0;
}

/* end of reset css*/

.l-wrapper{
    background-color:#ffffaf0;
}

US>.l-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.l-header__logo{
    width —90px;
    height —90px;
    padding —10px;
}

.p-nav__menu{
    display:flex;
}

.p-nav__list{
    margin-right —40px;
}

.p-nav__button{
    font-size: 150%;
    text-decoration: none;
}

.c-hero{
    height —1000px;
    background-image:url(../images/hero.jpg);
    background-repeat —No-repeat;
    background-size:cover;
}

.l-main__title{
    display:flex;
    justify-content:center;
    padding —130px0px130px0px;
    color:#808080;
    font-size: 250%;
}

.p-gallery {
    color:#808080;
    font-size: 200%;
  margin-right:2rem;
}

.l-contents{
    display:flex;
    padding-left —60px;
}

.p-gallery__tilte{
    margin-bottom —15px;
    padding —2px0px0px20px;
    border-left —solid8px#ff69b4;
    background:transparent;
    color:#808080;
    font-size: 90%;
}

.p-gallery__menu{
    display:flex;
    flex-wrap:wrap;
/*   Add*/
  justify-content:space-between;
}

.p-gallery__list{
/*   Add*/
  flex-basis —30%;
  list-style: none;
}

.p-gallery__photo{
/*   width causes the parent element to fit */
  width: 100%;
/*   Do not specify pixels*/
/*     width: 350px;*/
/*     height —250px;*/
/*   margin is only valid in the vertical direction*/
    margin —15px0px;
}

  .p-gallery {
    width: 400%;
  }

  .p-selfintroduction {
    padding-right —70px;
  }

  .p-selfintroduction__title{
    margin-bottom:30px;
    padding —2px0px0px20px;
    border-left —solid8px#ff69b4;
    background:transparent;
    color:#808080;
    font-size: 190%;
  }

  .p-selfintroduction__text{
    color:#808080;
    font-size: 150%;
    line-height: 35px;
  }

  .c-copyright__inner{
    display:flex;
    justify-content:center;
    padding —100px0px100px0px;
  }

  .c-copyright__text{
    padding —30px50px;
    border —solid2px white;
    background: #6495ED;
    color:#fff;
    font-size: 150%;
    box-shadow —0px0px0px10px#6495ED;
  }
<div class="l-wrapper">
  <header class="l-header">
    <img class="l-header__logo" src="https://imgur.com/JjB4HTS.png" alt="Logo">
    <nav>
      <ul class="p-nav__menu">
        <lic class="p-nav__list">
          <a href="class="p-nav__button">home</a>
        </li>
        <lic class="p-nav__list">
          <a href="class="p-nav__button">about</a>
        </li>
        <lic class="p-nav__list">
          <a href="class="p-nav__button">access</a>
        </li>
        <lic class="p-nav__list">
          <a href="class="p-nav__button">contact</a>
        </li>
      </ul>
    </nav>
  </header>
  <div class="c-hero"></div>
  <main class="l-main">
    <h1class="l-main__title">PC curriculum</h1>
    <div class="l-contents">
      <section class="p-gallery">
        <h2class="p-gallery__tilte"> Latest work</h2>
        <ul class="p-gallery__menu">
          <lic class="p-gallery__list">
            <img class="p-gallery__photo" src="https://i.imgur.com/Vt1vCsM.png" alt="The Sunset and the Sea">
          </li>
          <lic class="p-gallery__list">
            <img class="p-gallery__photo" src="https://i.imgur.com/Vt1vCsM.png" alt="sand and shells">
          </li>
          <lic class="p-gallery__list">
            <img class="p-gallery__photo" src="https://i.imgur.com/Vt1vCsM.png" alt="Sand Beach and Drink">
          </li>
          <lic class="p-gallery__list">
            <img class="p-gallery__photo" src="https://i.imgur.com/Vt1vCsM.png" alt="piers">
          </li>
          <lic class="p-gallery__list">
            <img class="p-gallery__photo" src="https://i.imgur.com/Vt1vCsM.png" alt="small boat">
          </li>
          <lic class="p-gallery__list">
            <img class="p-gallery__photo" src="https://i.imgur.com/Vt1vCsM.png" alt="Sunset sky">
          </li>
        </ul>
      </section>
      <section class="p-selfintroduction">
        <h2class="p-self-introduction__title">Self-introduction</h2>
        <p class="p-selfintroduction__text">
          Lorem ipsum dolor sitamet, connectetur adipising elit, sed do eiusmod tempor incidunt ut labore et dolore magna aliqua.Utenim ad minimum veniam, quisnostrud excitation ullam laboris nis aliquip exea commo code requirement
        </p>
      </section>
    </div>
  </main>
  <footer class="l-footer">
    <div class="c-copyright">
      <div class="c-copyright__inner">
        <p class="c-copyright__text">
          <small>©2019 example.inc</small>
        </p>
      </div>
    </div>
  </footer>
</div>


2022-09-30 11:10

If you have any answers or tips


© 2022 OneMinuteCode. All rights reserved.