Heya Gals/Guys, I just finished my tribute page to my favourite show, The Office, and would love some feedback on it! Here’s the link: https://codepen.io/Heenal02/full/WERyeP/
Thank you!
Heya Gals/Guys, I just finished my tribute page to my favourite show, The Office, and would love some feedback on it! Here’s the link: https://codepen.io/Heenal02/full/WERyeP/
Thank you!
Hey. Try using the bootstrap classes more effectively. You can end up with same (or very similiar anyway) result with a lot less css.
For example, to have a structure like you have (image quote - new line - quote image), you could just do this:
<div class="row">
<div class="col-auto">
<img class="img-actor" src="https://s-media-cache-ak0.pinimg.com/originals/8f/5b/a4/8f5ba40d8263d3210a8aafc66d47f39a.jpg">
</div>
<div class="col">
<i>"If I had a gun with two bullets, and I was in a room with Hitler, Bin Laden and Toby, I would shoot Toby twice." - MICHAEL SCOTT</i>
</div>
<div class="w-100 pt-3 pb-3"></div>
<div class="col text-right">
<i>“Reject a woman, and she will never let it go. One of the many defects of their kind. Also, weak arms.” - DWIGHT SCHRUTE</i>
</div>
<div class="col-auto">
<img class="img-actor" src="https://ih0.redbubble.net/image.118844262.2946/st%2Csmall%2C215x235-pad%2C210x230%2Cf8f8f8.lite-1u2.jpg">
</div>
<div class="w-100 pt-3 pb-3"></div>
</div>
with as little css as this:
.img-actor {
height:80px;
border-radius: 50%;
}
Thank you for that! I will definitely try that! Just a quick question, what would say,
do?No problem!
I imagine you were trying to add some code to your post. When you want to do that, you need to wrap it in a single backtick if it’s just one line, or a triple backtick if it’s a block of code, otherwise it won’t show up.
See this post for more info.
Haha, yes, I was trying to put in a single line code. I had no idea it didn’t show up. Thank you once again!
I wanted to ask, what <div class="w-100 pt-3 pb-3"></div>
does?
It’s fine, I had a hard time figuring that out as well.
The “w-100” class just gives a 100% width at the div you’re using it on. You can see it in use in the Bootstrap 4 documentation here.
The “pt-3” and “pb-3” are spacing classes that, in this case, give some padding top (pt) and bottom (pb) respectively.
So, that <div class="w-100 pt-3 pb-3"></div>
basically acts like a “break” to force the next column to start on a new line and have a little space between it and the one before it.
Awesome, I’ll try and refine my code and see how it goes!