为什么我的 <section> 在调整 window 大小时被截断了？

Question

只是寻求一些帮助。我的所有部分都有填充，因此在调整大小时它们永远不会触及 window 的边缘。但是，填充在我使用 CSS 网格并使我的网格模板列之一具有最大内容值的介绍部分不起作用。我怎样才能解决这个问题？这是我的代码以及代码笔上的 link。预先感谢您的帮助！

HTML

<section class="intro" id="home">
    <h1 class="section__title section__title--intro">
        Hi, I am <strong>Christine Banlawi</strong>
    </h1>
    <p class="section__subtitle section__subtitle--intro">web developer</p>
    <img src="images/cb-01.jpg" alt="" class="intro__img">
</section>

CSS

.intro {
    position: relative;
}

.intro__img {
    box-shadow: var(--bs);
}

@media (min-width: 600px) {
    .intro {
        display: grid;
        width: min-content;
        margin: 0 auto;
        grid-column-gap: 1em;
        grid-template-areas: 
            "img title"
            "img subtitle";
        grid-template-columns: min-content max-content;
    }
    
    .intro__img {
        grid-area: img;
        min-width: 300px;
        position: relative;
        z-index: 2;
    }    
    
    .section__subtitle--intro {
        align-self: start;
        grid-column: -1 / 1;
        grid-row: 2;
        text-align: right;
        position: relative;
        left: -1.5em;
        width: calc(100% + 3em);
    }
}

https://codepen.io/cbanlawi/pen/oNzNEOy

Answer 1

‍ Hi Bro

删除

@media (min-width: 600px;) {
  /* and remove all content here */
}

并添加

@media (min-width: 768px) {
  .intro {
    display: grid;
    justify-content: center;
    margin: 0 auto;
    grid-column-gap: 1em;
    grid-template-areas:
      "img title"
      "img subtitle";
  }

  .intro__img {
    grid-area: img;
    min-width: 250px;
    position: relative;
    z-index: 2;
  }

  .section__subtitle--intro {
    align-self: start;
    grid-column: -1 / 1;
    grid-row: 2;
    text-align: right;
    position: relative;
    left: -1em;
    width: calc(100% + 1em);
  }
}

为什么我的 <section> 在调整 window 大小时被截断了？

Why is my <section> getting cut off when resizing window?

html

css

grid

responsive