Kevin Powell - Community•7mo ago

How to make this smaller?

Hey there! Appreciate you guys taking time to help me out. I had a quick question as you see the three containers take up a good amount of space I was tryna screw around with it to make it smaller but can't because it keeps screwing with other stuff I'll send a CodePen of the HTML/CSS related to it if anyone can help make it better looking.

26 Replies

RMON•7mo ago

Ok, Just to let you guy's know I cannot send a CodePen as it's bugging out since I use imgaes that wont show up on CodePen

    <!--This Will House Content Regarding My Projects-->
    <div class="portfolio-projects">
      <div class="container">
        <div class="wrapper">
          <div class="CenteredHeaders">
            <h3 class="personal-info-text-design">My Work</h3>
            <h1 class="mywork">Find my work </h1>
          </div>
        </div>
        <div class="work-list">
          <div class="work">
            <img src="icons/work-1.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">Calculator App</h3>
              <p class="project-styling">Experience the convenience of our user-friendly calculator app</p>
              <a href="#"></a>
            </div>
          </div>
          <div class="work">
            <img src="icons/work-2.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">ToDo List</h3>
              <p class="project-styling">Simple and easy-to-use ToDo List to always stay on top of your tasks.</p>
              <a href="#"></a>
            </div>
          </div>
          <div class="work">
            <img src="icons/work-3.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">Website Clone</h3>
              <p class="project-styling">Example Text</p>
              <a href="#"></a>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--This Will House Content Regarding My Projects-->
    <div class="portfolio-projects">
      <div class="container">
        <div class="wrapper">
          <div class="CenteredHeaders">
            <h3 class="personal-info-text-design">My Work</h3>
            <h1 class="mywork">Find my work </h1>
          </div>
        </div>
        <div class="work-list">
          <div class="work">
            <img src="icons/work-1.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">Calculator App</h3>
              <p class="project-styling">Experience the convenience of our user-friendly calculator app</p>
              <a href="#"></a>
            </div>
          </div>
          <div class="work">
            <img src="icons/work-2.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">ToDo List</h3>
              <p class="project-styling">Simple and easy-to-use ToDo List to always stay on top of your tasks.</p>
              <a href="#"></a>
            </div>
          </div>
          <div class="work">
            <img src="icons/work-3.png" alt="work-1-img">
            <div class="layer">
              <h3 class="project-styling">Website Clone</h3>
              <p class="project-styling">Example Text</p>
              <a href="#"></a>
            </div>
          </div>
        </div>
      </div>
    </div>

/* Sections for styling for project portion of my website*/

.portfolio-projects {
  padding: 2em;
  background-color: #cbcbcb;
}

.personal-info-text-design {
  color: rgb(142 55 124);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.work-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 40px;
  margin-top: 50px;
}

.work {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.work img {
  border-radius: 10px;
  overflow: hidden;
  display: block;
  width: 100%;
}

.layer {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.6), #0f0f11);
  border-radius: 10px;
  position: absolute; /* Position relative to the parent .work */
  left: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
  text-align: center;
  gap: 1em;
}

.project-styling {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

/* Sections for styling for project portion of my website*/

.portfolio-projects {
  padding: 2em;
  background-color: #cbcbcb;
}

.personal-info-text-design {
  color: rgb(142 55 124);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.work-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 40px;
  margin-top: 50px;
}

.work {
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.work img {
  border-radius: 10px;
  overflow: hidden;
  display: block;
  width: 100%;
}

.layer {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.6), #0f0f11);
  border-radius: 10px;
  position: absolute; /* Position relative to the parent .work */
  left: 0;
  bottom: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 40px;
  text-align: center;
  gap: 1em;
}

.project-styling {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}

clevermissfox•7mo ago

So you know you can host your images anywhere online, even use a discord cdn link or something like https://imgur.com , upload them and then use the link in the <img src="https://myimagelink.com">

Imgur

Imgur: The magic of the Internet

clevermissfox•7mo ago

I'm not totally clear on your goal. How much smaller do you want them to be?

RMON•7mo ago

Honestly the best way to put it is, Small enough where it looks nice and legible Right now it's giant

RMON•7mo ago

a reference I was going off was this

RMON•7mo ago

Quick question, Should I upload them to communities?

RMON•7mo ago

https://imgur.com/PMFuSyy

Imgur

RMON•7mo ago

That's the link for it, I tried adding it into my code but it hasn't worked?

clevermissfox•7mo ago

on imgur you just go to new post.

clevermissfox•7mo ago

for discord i send it to a bot so im not mucking up any servers

RMON•7mo ago

I realized, They have an option to embed for ex (<blockquote class="imgur-embed-pub" lang="en" data-id="a/Q7zrxTO" ><a href="//imgur.com/a/Q7zrxTO">Simple IPhone stock images</a></blockquote><script async src="//s.imgur.com/min/embed.js" charset="utf-8"></script>:

clevermissfox•7mo ago

if you use <img src="https://i.imgur.com/PMFuSyy.png" alt=""> it wil work

RMON•7mo ago

Doesn't look that good tho lol

clevermissfox•7mo ago

you can also just use the link from github if you have your project pushed to a repo there the image youre uploading, at least the one you linked here is very small. so it wont look good anywhere if youre trying to stretch it bigger than its height/width

RMON•7mo ago

I see Let me try to figure this img situation out, I'll get back to you!

Gaming

Programming

How to make this smaller?