So, I know it’s against the rules, but I wanted to find out how to add that mark on the pic like on this example page.
Here’s mine, I kind used some of the classes i thought might do the trick, but nothing, could i get some advice? Thank you
It’s not against the rules, don’t worry about those things so much. Questions are meant to be answered, don’t think of FCC as school, the goal is mostly for you to learn, not so much record rules but understand concepts.
As for your question, the sample project uses bootstrap classes, there’s a wheel besides the “CSS” window, if you click there on the freecodecamp project you will see “Add external CSS”, this adds the Bootstrap CSS.
This allows you to use a CSS library with built in styles, one of those styles gives the subtitle effect to images. FCC is just making use of that, they don’t built it from scratch.
edit: Just noticed that you’re using Bootstrap too, sorry. The issue is that you’re using version 4, they’re using version 3.5, copy and paste their URL directly into your project. Class names probably changed in v4.
You mean the polaroid picture effectm where the image has a wide white bottom edge? try reading this :
https://www.w3schools.com/css/css3_images.asp
it is explained under polaroid. The thing you have to do is add a padding at the bottom of your image. It fills with the background color (padding-bottom: 30px; )
Okay, I see the Polaroid stuff you said, however, those are a bunch of numbers haha, I’d like to actually learn what the things I’m writing down do instead of just copy pasting, if you have time, could you walk me through it?
No problem. I had the same problem in the beginning. It is very important to understand 2 things, when it comes to layouts in general:
1. PADDINGS
2. MARGINS
1. PADDINGS
The CSS padding properties are used to generate space around content, but still in its container.
Imagine it like bodyfat: its inside you and it makes you bigger and its white.
The padding clears an area around the content (inside the border) of an element.
Which means, that if you add padding to an image containe, it will add space around the image but still in the img element container. You usually see this as a white trim around an element. You specify it using the number of pixels (px) width you want each side to have. It goes like this:
padding-top: somepx;
padding-right: somepx;
padding-bottom: somepx;
padding-left: somepx;
and if you want to put it shortly in one argument it would be:
padding: 50px 30px 50px 80px; (px here always go in a clockwise direction around the element, so here the padding is top 50px, right 30px, bottom 50px, left 80px)
It is also possible to write it using two or three values, but i dont bother with it. If I know I want padding on my top and right I use padding-top and padding-right (see https://www.w3schools.com/css/css_padding.asp)
- MARGIN
The margin properties set the size of the white space outside the border.
It is like a border zone between yours and your neighbours front lawn. It’s not part of your property, so you willl not have your grass there or put anything there etc…
The process of setting margins is similar:
margin-top
margin-right
margin-bottom
margin-left
Just remember that you can also set margin to be auto - margin: auto; This is gold when you want to center something, because the computer evenly distributes the space around the element.
In a POLAROID PICTURE, you take advantage that the white border at the bottom looks like the one on old photos and put some text on it by moving the text on it. A preaty cheap trick, if you think of it like that 
The same is with thumbnails. You can make them by just adding a slim white trim aroun an image (padding)
Hope you get the feeling of what I was trying to explain.
On copy-pasting code: Its how I learned most of the stuff. By looking at the code, making small changes and seeing what happens. It’ a very important part of the learning process. Don’t be afraid tp look at other people’s code. It’s the same as writing a good book. If you want to be a good author, you first have to read a lot of other peoples books.
1 Like
I’m really thankful for all the info! I’m really learning some stuff thanks to you.
I hate to keep asking, but now, i kind of achieved that effect i wanted, however, when on actual full screen the white space on left-right it’s just huge, I’m sorry, but it’s kind of confusing so far.
Is it about the pic being too small? I’m scared to touch the pic properties because i had a hard time getting it centered, hehe.
OK, You have 2 problems here. The answer is actually in your question 
" white space on left-right it’s just huge "
It means that your polaroid container is so wide, that the picture is not filling it. Containers are what they sound like- places you put things in. If they are not full, you can see their background.
-
To solve this you have to set a width: something %; property to your polaroid div container. The % you say it will be, will mean the % width of the body. So if you put in 50%, it wil be half as wide as your lightblue background. Try for example 60, 80 or 90% and see how it looks to you.
-
Next, you have to make the picture wide enough to fill it. If you set a max-width property to your image, it will limit it’s size. The best thing to do in your cas is to put it width: 100%; so that it will fill up 100% of it’s container.
After you do this 2 things, you have to use the golden rule from my previous post: if you want to center something, use margin: auto; (now you have margin: 0; – that will not work for you)
Hope it helps
Awesome! It did work, thank you so much for all the help, it is pretty cool to create custom classes, hehe
I hope you’ll be there when I get stucked again (which is going to happen)
Thanks for everything, i’ll post here again if i get another problem on the same page.
Okay so one last thing, it’s not really a problem but i’m curious, in this code:
.container {
background-color: #EEE
}
div.container {
text-align: center;
padding: 10px 20px;
}
What’s the difference? What’s actually div.container? I deleted it to check and everything went wrong, white background, uncentered text, etc
Its the same class called two ways… the first one is just being called by the class container, and the second one is saying, the container in div. They are both pointing to the same thing…just that the second one is being more specific than the first.
Look up css specificity to see what it is and how its used…
It’s kind of weird, when I delete .container and move the contents to div.container it stays the same, but the other way around it gets messed up
Yeah, that would be due to specificity… if you look it up to see what it means for your css then you’ll understand why that is happening.