What are the functions in this CSS doing exactly?

1

Hello :slight_smile: First post, so I’m sorry if these sorts of topics are prohibited. I’m currently working on the Tribute Site part of FCC, and I had a specific idea in mind, and so I’ve been trying to figure out how to achieve that by scouring the internet. I found a pen project (a blog site) that had a layout similar to what I wanted to achieve, but the CSS it uses is currently out of my understanding and I really want to know what’s going on in each line?:

#text-container {    
  width: calc((3*90vw)/5);
  left: 50%;
  transform: translateX(-50%);
  height: 100%;
  overflow: hidden;
  z-index: 2;
  position: relative;
  background: white;
  border-left: 3px solid #7B6938;
  border-right: 3px solid #7B6938;
  padding-right: 3rem;
}

If someone could provide a breakdown for me that would be very appreciated :slight_smile: Thanks.

2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

Why don’t you just explain in detail what specific idea you want to implement. Also, if you have a Codepen link to what you already have completed, it will help us to give you better answers.

3

Thanks :slight_smile:
I wanted the site to have empty space (padding, I think is the right word) to either side. With a heading and subheading in the centre top, an image to the left that lines up with the heading and the text+bullet points to the right of the image.

Here is my codepen so far:

EDIT: Interesting, in the embedded pen the site appears incorrect to how I see it in my browser, where it more resembles what I actually am going for. Is this because of the container-fluid div?

4

When I have full browser width, I am seeing what I think you are describing that you want.

image
image1249×789 234 KB

When the screen size is smaller, I see:

image
image400×799 134 KB

If you want to center the “Here is a list of some of his accolades” to look better when screen is smaller, then add class=“text-center” to the <h3> tag containing the text above.

If this is not what you mean, then try to rephrase your question.

5