0

I have made this with HTML and CSS, container 01 is with contents, on the left side is with texts (number, title and detail on top each other) and on the right side is with a picture. I wanted to swap these texts and picture on container 02, but the picture does not show up. Could anyone help me with this?

.container-num {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 4rem;
  margin-bottom: 10rem;
  justify-content: center;
  align-items: center;
}

.number-img {
  width: 100%;
}

.number {
  font-family: 'Noto Serif Display', serif;
  font-size: 8.2rem;
  font-weight: 900;
  color: #eee;
}

.detail-en {
  font-family: sans-serif;
  line-height: 1.5;
}
  <!-- 01 can see correctly-->
<div class="container-num">
    <div class="number-text-box">
        <div class="number">01</div>
            <h3 class="heading-tertiary">title １</h3>
            <div class="detail">
                <p class="detail-en">detail</p>
                <p class="detail-jp">detail</p>
            </div>
        </div>
        <div class="number-img">
            <img src="img/img01.JPG" class="pc number-img" alt="picture１"/>
        </div>
    </div>

<!-- 02 the pic does not show up-->

    <div class="container-num">
        <div class="number-img">
            <img src="img/img02.JPG" class="pc number-img" alt="picture２"/>
        </div>

        <div class="number-text-box">
            <div class="number">02</div>
                <h3 class="heading-tertiary">title ２</h3>

                <div class="detail">
                    <p class="detail-en">detail</p>
                    <p class="detail-jp">detail</p>
                </div>
            </div>
Nemoko
  • 421
  • 4
  • 13
user16174378
  • 3
  • 3
  • 1
    Without access to a demo of this NOT working we cannot assist. This could be a path issue, an error in the file name (JPG is not the same as jpg). – Paulie_D Mar 14 '22 at 13:44
  • @Paulie_D thank you for your comment. What I can do to let someone access to the demo? I am sorry I do not know how to do that. – user16174378 Mar 14 '22 at 14:11
  • You'd have to put the demo online with actual images. JSFiddle/Codepen could be something to use but you'd need to have the images online too. – Paulie_D Mar 14 '22 at 14:22
  • What @Paulie_D suggested. For path issues, see SO answers about [Absolute vs relative paths](https://stackoverflow.com/questions/2005079/absolute-vs-relative-urls) and [Relative paths in HTML](https://stackoverflow.com/questions/24028561/relative-path-in-html). Also, it'd be a good rule of thumb to keep every file name and extension in lowercase to avoid a scenario like this. Certain applications generate `jpeg` extension rather than `jpg` which might cause an unexpected glitch at times as well. – Bumhan Yu Mar 14 '22 at 16:37

0 Answers0