Home>

What I want to solve: I have images and text arranged alternately, but I want to place a variable size white square under h3 and p. I want the square padding for the background of the text to be 5px.
I have attached the wire frame of the rendering.

What I went to: [html]
[css] .rect-wrap {width: 50%;}
.rect {width: 100%;padding-top: 100%;background-color: # 29d632;}
I added, but the layout is broken.

I would appreciate it if you could answer.
Thank you.

<! DOCTYPE html><html><head><meta charset = "utf-8"><title>Dummy Dummy Dummy</title><meta name = "description" content = "dummy dummy dummy"><link rel = "stylesheet" href = "https://unpkg.com/ress/dist/ress.min.css"><link href = "https://fonts.googleapis.com/css2?family=Lato:[email protected];700&family=Lora:[email protected];600&family=Noto+Sans+JP:[email protected];700&family=Noto+Serif" + JP: wght @ 400;700&display = swap "rel =" stylesheet "><link rel = "stylesheet" href = "dummy dummy dummy"></head><body>                                    <header>                                <nav>            <ul>                <li>Dummy Dummy Dummy</li>                <li>Dummy Dummy Dummy</li>                <li>Dummy Dummy Dummy</li>                <li>Dummy Dummy Dummy</li>            </ul>        </nav>        </header>                                       Enter the title Enter the title               <p>Dummy Dummy Dummy</p><p>Dummy Dummy Dummy</p><p>Dummy Dummy Dummy</p>                                                             Dummy Dummy Dummy                      <ul>            <li>                                                                                                                                  Contains a heading                       <p>Contains text. Contains text. Contains text.
                            Contains text. Contains text. Contains text.
                            Contains text. Contains text. Contains text.</p>                                </li>            <li>                                                                 Contains a heading                       <p>Contains text. Contains text. Contains text.
                            Contains text. Contains text. Contains text.
                            Contains text. Contains text. Contains text.</p>                                </li><li>                                                                 Contains a heading                       <p>Contains text. Contains text. Contains text.
                            Contains text. Contains text. Contains text.
                            Contains text. Contains text. Contains text.</p>                                </li>            <li>                                                                 Contains a heading                       <p>Contains text. Contains text. Contains text.
                            Contains text. Contains text. Contains text.
                            Contains text. Contains text. Contains text.</p>                                </li>        </ul>        </body></html>
@charset "UTF-8";
* {
    box-sizing: border-box;
}
html {
    font-size: 100%;
}
body {
    font-family:'Lora', serif;
    font-family:'Noto Serif JP', serif;
}
a {
    text-decoration: none;
}
h2, h3, p {
    font-weight: normal;
}
.container {
    max-width: 1170px;
    width: 100%;
    padding: 0 15px;
    margin: 0 auto;
    padding: 0 4%;
}
.top-wrapper {
    min-height: 100vh;
    background-image: url (dummy dummy dummy);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
.top-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20%;
    -webkit-transform: translate (-50%, -50%);
    -moz-transform: translate (-50%, -50%);
    transform: translate (-50%, -50%);
    z-index: 100;
}
header {
    height: 80px;
    width: 100%;
    background-color: # f7f7f7;
}
.header-flexbox {
    display: flex;
    justify-content: space-between;
}.header-logo {
    width: 55px;
    margin-top: 13px;
}
.nav-main {
    display: flex;
    list-style: none;
    margin-top: 27px;
    font-size: 1rem;
    text-transform: uppercase;
}
.nav-main li {
    margin-left: 70px;
    letter-spacing: 5px;
}
.nav-main a {
    color: black;
    position: relative;
    display: inline-block;
}
.nav-main a :: after {
    position: absolute;
    bottom: -10px;
    left: 0;
    content:'';
    width: 100%;
    height: 1px;
    background: # 333;
    transform: scale (0, 1);
    transform-origin: right top;
    transition: transform .3s;
}
.nav-main a: hover :: after {
    transform-origin: left top;
    transform: scale (1, 1);
}
.message-wrapper {
    height: 1050px;
    background-image: url (dummy dummy dummy);
    background-size: cover;
    object-fit: cover;
    display: flex;
    justify-content: center;
    padding-top: 90px;
}
.message-text {
    color: black;
    text-align: center;
}
.message-text h1 {
    font-size: 26px;
    letter-spacing: 5px;
    font-weight: bold;
    padding-bottom: 90px;
}
.message-text p {
    font-size: 14px;
    letter-spacing: 5px;
    line-height: 2.5;
    font-weight: normal;
}
.message-paddingTop {
    padding-top: 40px;
}
.activity-wrapper {
    height: auto;
}
ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.heading {padding: 90px 0;
    text-align: center;
}
.heading h2 {
    letter-spacing: 5px;
    font-size: 16px;
    font-weight: normal;
    line-height: 2.5;
    border-top: 1px solid # 000;
    border-bottom: 1px solid # 000;
    display: inline-block;
}
.servicearea {
    margin-top: 0px;
}
.servicearea .category + .category {
    margin-top: 60px;
}
.servicearea .category {
    background: #fff;
}
.rect-wrap {
    width: 50%;
}
.rect {
    width: 100%;
    padding-top: 100%;
    background-color: # 29d632;
}
.txt h3 {
    font-size: 20px;
    font-weight: bold;
    border-bottom: 1px solid # 000;
    line-height: 3.5;
    letter-spacing: 5px;
}
.txt p {
    font-size: 14px;
    padding-top: 22px;
    line-height: 1.8;
    letter-spacing: 5px;
}
.servicearea .category {
    display: flex;
    align-items: center;
}
.pic img {
    height: 500px;
    object-fit: cover;
}
.servicearea .category .pic {
    width: 85%;
}
.TXT {
    width: 25%;
}
.servicearea .category .pic img {
    width: 100%;
}
ul li: nth-child (even) {
    flex-direction: row-reverse;
}
ul li: nth-child (even) .txt {
    padding-right: 0;
    margin-right: -5%;
}
ul li: nth-child (odd) .txt {
    padding-left: 0;
    margin-left: -5%;
}
  • Answer # 1


    Is it something like this?

    Based on the code you provided
    I created a demo site.
    https://ki-hi-ro.com/sample/rect/

    You can download the source code here.
    Git Hub

    Unzip the ZIP file.

    The HTML below repeats the same four times.

          
              
                  
                     Contains a heading 
                  <p>
                      Contains text. Contains text. Contains text.
                      Contains text. Contains text. Contains text.
                      Contains text. Contains text. Contains text.
                  </p>
                  
              
              
                
              
          </article>


    CSS of the common part.

    /* common part */
    .servicearea {
        margin-top: 0px;
    }
    .category {
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
    .pic {
        width: 77%;
    }
    img {
        width: 100%;
        height: 500px;
        object-fit: cover;
    }
    .rect-wrap {
        width: 33%;
        margin-right: -100px;
        z-index: 1;
    }
    .TXT {
        padding: 1rem 2rem 2rem 2rem;
        background-color: #fff;
    }
    h3 {
        font-size: 20px;
        font-weight: bold;
        border-bottom: 1px solid # 000;
        line-height: 3.5;
        letter-spacing: 5px;
    }
    p {
        font-size: 14px;
        padding-top: 22px;
        line-height: 1.8;
        letter-spacing: 5px;
    }


    The second and subsequent ones are spaced above.

    / * Spacing above other than the first * /
    .category: not (: first-child) {
        margin-top: 10rem;
    }


    Even numbers have the left and right elements reversed.

    / * Even number * /
    .category: nth-child (2n) {
        background: #fff;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;
        justify-content: flex-start;
    }
    .category: nth-child (2n) .rect-wrap {
        z-index: 1;
        margin-left: -100px;
    }