Hello 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?:
border-left: 3px solid #7B6938;
border-right: 3px solid #7B6938;
If someone could provide a breakdown for me that would be very appreciated Thanks.
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.
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.
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?
When I have full browser width, I am seeing what I think you are describing that you want.
When the screen size is smaller, I see:
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.