How do I make side row with pictures followed by texts in the bottom?-CodePudding

I'm doing a portfolio project and I'd like to do something simmilar to this, but it happens that when I'm doing the responsive part, the row pops out of the div. So i would like to know what do I do (or change) to make it decrease alongside the div.

this is what is happening when I shrink the page:draft

HTML

<section >
<h2 >Experience</h2>
<div >
  <div >
    <img src="img">
    <p>HTML</p>
  </div>
  <div >
    <img src="img">
    <p>CSS</p>
  </div>
  <div >
    <img src="img">
    <p>JavaScript</p>
  </div>
  <div >
    <img src="img">
    <p>UX/UI Designer</p>
  </div>
</div>

CSS

.experience {
  max-width: 1200px;
  padding: 30px 25px;
  margin: 0px 70px;
  background-color: rgba(4, 7, 30);
  position: relative;
  display: grid;
  align-items: center;
 }

.subtitle {
  color: #fff;
}

.row {
  display: flex;
  flex-direction: row;
  place-self: center;
  margin: 30px 0px;
  gap: 300px;
  width: 1100px;
  max-width: auto;
  overflow-x: scroll;
  background: #0e184b;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 30px 20px 0px 20px;
  position: relative;
}

.item img {
  width: 70px;
}

.item p {
  font-size: 1.5rem;
  margin: 15px;
  color: #fff;
}

.item4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 30px 50px 15px 0px;
  position: relative;
}

.item4 img {
  margin-bottom: 20px;
  width: 100px;
}

.item4 p {
  white-space: nowrap;
  font-size: 1.4rem;
  color: #fff;
}

.row {
  border-width: 8px;
  border-style: solid;
  border-image: linear-gradient(#5981bc, #0a189a) 0.5;
  border-radius: 10px;
}

CodePudding user response：

You can use Flexbox here's an example:

.row {
  display: flex;
  flex-direction: row;
  width: 500px;
  overflow-x: scroll;
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10px;
  background: rgba(0, 0, 0, 0.5);
}

span {
  margin: 5px;
}

<div >
  <div >
    <img src="https://i.pravatar.cc/150?img=1">
    <span>Title</span>
  </div>
  <div >
    <img src="https://i.pravatar.cc/150?img=2">
    <span>Title</span>
  </div>
  <div >
    <img src="https://i.pravatar.cc/150?img=3">
    <span>Title</span>
  </div>
  <div >
    <img src="https://i.pravatar.cc/150?img=4">
    <span>Title</span>
  </div>
  <div >
    <img src="https://i.pravatar.cc/150?img=5">
    <span>Title</span>
  </div>
  <div >
    <img src="https://i.pravatar.cc/150?img=6">
    <span>Title</span>
  </div>
  <div >
    <img src="https://i.pravatar.cc/150?img=7">
    <span>Title</span>
  </div>
  <div >
    <img src="https://i.pravatar.cc/150?img=8">
    <span>Title</span>
  </div>
  <div >
    <img src="https://i.pravatar.cc/150?img=9">
    <span>Title</span>
  </div>
  <div >
    <img src="https://i.pravatar.cc/150?img=20">
    <span>Title</span>
  </div>
</div>

Update: added another example:

::-webkit-scrollbar {
  background: linear-gradient(0deg, rgba(24, 35, 133, 1) 0%, rgba(80, 117, 184, 1) 100%);
}

 ::-webkit-scrollbar-track {
  box-shadow: inset 0 0 10px 10px #061537;
  border: solid 3px transparent;
  border-radius: 20px;
}

 ::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 10px 10px #f0f0f0;
  border: solid 5px transparent;
  border-radius: 20px;
}

body {
  color: white;
  background: #072854;
}

.experience {
  width: 70%;
  padding: 25px 25px;
  margin: 0px auto;
  background-color: rgba(4, 7, 30);
}

.box {
  /* set row's border thickness down here by adjusting padding */
  padding: 4px;
  margin: 0 auto;
  overflow: hidden;
  /* set row's width down here */
  width: 95%;
  max-width: 700px;
  background: linear-gradient(0deg, rgba(24, 35, 133, 1) 0%, rgba(80, 117, 184, 1) 100%);
}

.row {
  display: flex;
  flex-direction: row;
  background: #061537;
  overflow-x: auto;
}

.item {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: column;
  min-width: 80px;
  margin: 15px auto;
  padding: 0 10px;
}

.item::after:not(.item:last-child) {
  content: "";
  position: absolute;
  height: 80%;
  right: -5px;
  width: 3px;
  background: white;
}

img {
  width: 50px;
  height: 50px;
  object-fit: contain;
}

span {
  margin: 10px;
  font-size: 10pt;
  font-weight: 100;
}

hr {
  /* if you wanna add margin to the item's play with second value */
  margin: 20px 0;
  border-radius: 10px;
  border: 2px solid #dcdee0;
}

<section >
  <h2 >Experience</h2>
  <div >
    <div >
      <div >
        <img src="https://i.pravatar.cc/150?random=6" />
        <span>HTML</span>
      </div>
      <hr />
      <div >
        <img src="https://i.pravatar.cc/150?random=5" />
        <span>CSS</span>
      </div>
      <hr />
      <div >
        <img src="https://i.pravatar.cc/150?random=4" />
        <span>Javascript</span>
      </div>
      <hr />
      <div >
        <img src="https://i.pravatar.cc/150?random=3" />
        <span>HTML</span>
      </div>
      <hr />
      <div >
        <img src="https://i.pravatar.cc/150?random=2" />
        <span>CSS</span>
      </div>
      <hr />
      <div >
        <img src="https://i.pravatar.cc/150?random=1" />
        <span>Javascript</span>
      </div>
    </div>
  </div>
</section>

CodePudding user response：

Is this what you want?

.container{display:flex;gap: 0.8rem;width:200px;overflow:auto}
.item{display:flex;flex-direction:column}
.item div{width:48px;height:48px;background-color:#e1e1e1}
.item p{text-align:center}

<div >
  <div >
    <div ></div>
    <p>Box 1</p>
  </div>
  <div >
    <div ></div>
    <p>Box 2</p>
  </div>
  <div >
    <div ></div>
    <p>Box 3</p>
  </div>
  <div >
    <div ></div>
    <p>Box 4</p>
  </div>
  <div >
    <div ></div>
    <p>Box 5</p>
  </div>
</div>