时间戳

首页 > 解决方案 > 内容不会将大小调整为 pagewrapper

html - 内容不会将大小调整为 pagewrapper

问题描述

当我调整浏览器窗口的大小时，我无法弄清楚为什么我的标题和标题图像不会调整为在页面包装器内居中。“信息框”类正在调整大小和调整，但 default-img 和 default-heading 不是。

.pageWrapper {
    text-align: center;
    margin: 15px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    background-color: #e6d5b8;
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 1.5px;
    color: #4a3933;
}
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}
.contentbox {
    background: transparent;
    padding: 20px 20px 20px 20px;
  
}

.informationbox {
    text-align: left;
    padding: 10px;
    margin: 5px 0px;
    border: 1px solid transparent;
    border-radius: 10px;
    transition: all 400ms ease-in-out;
}
.default-heading {
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    letter-spacing: 1.5px;
    color: rgb(184, 13, 50);
  
}
.default-img {
   border:1px solid transparent;
   border-radius: 10px;
   margin: 0 auto;
}

<body>
    <div class="pageWrapper">
        <div class="row">
            <div class="column contentbox"> <!-- Main image and header left --> 
                <img src="https://www.lifeinnorway.net/wp-content/uploads/2019/01/learn-norwegian-to-fluency.jpg" class="default-img">
                <h1 class="default-heading center">Norwegian Language course</h1>
            </div>
            <div class="column contentbox"> <!--Displayed information on the right top of the page-->
                <div class="informationbox" id="schedule"> 
                    <h4> Schedule </h4>
                        <p> <strong> Please register for more information </strong> </p>
                    </ul>
                </div>
<body/>

标签： htmlcssflexbox

解决方案

我一直在通过在 HTML 的标题中输入它来使用它，并且它在我的所有设备上都可以使用

  <meta name= "viewport" content="width=device-width, initial-scale=1">

推荐阅读