Hello fellow camper @Zaena,
I’d like to start by saying, when I saw the title of this post I jumped in right away, extremely eager to read the content! My hopes were high.
But as soon as I started reading the content, I felt a little disappointed!
Me feeling that way has NOTHING to do with your work, so be relaxed
It is because I love that series (it’s one of my best ever watched actually). In fact, it was the first thing that came to my mind when I read the assignment. But I did not do it! So, when I saw you title, I got too excited too fast, I was hoping to find a review maybe or some analysis of the events or something of that sort. But it was not what I found Haha.
Although, I do like what you did; A brief resumé of the experience you had while working on the challenge
Anyway … Now, let’s get back to code!
I will only focus on one side of you project, which I find very important.
The images:
The images in the slide clearly are not responsive. I thought “He must have fixed their height in pixels”. Looking at your code, I confirmed it.
Before explaining the logic, let’s recap:
Responsive = The dimensions of something change according the dimensions of the window.
Not Responsive = Fixed = The dimensions of something stay the same, no matter what.
.carousel-inner > .item > img{
width: 100%; /* <<--- this is responsive */
height: 480px; /* <<--- this is fixed = not responsive */
}
width: 100%
= "Dear <img/>
tag, use all the space available in the screen width! If the screen is 1024px wide, take all that. If it get smaller, say 700px, then you should take 700px.
height: 480px
= "Hey you, stubborn <img/>
tag, you are so stubborn that you never change your mind! You always think that 480px
is the right height, no matter what! Whether it was a PC monitor, a tablet or a small mobile screen you will always keep that height!
Ok, what are the solutions?
First: Revise the Make Images Mobile Responsive lesson. And then, Read-Search-Ask about it, starting from the Bootstrap docs.
Second: In example like these, I think it is a good practice to make the width and the height both either relative (percentage) or fixed. But not both.
FYI:
There is something called media queries in CSS.
Basically, it allows you to set CSS values according to what range is the window.
For example, if the window’s width is less than 900px but greater 700px, then the image width should be XXXpx
But if the window’s width is less than 700px, the image width should be set to YYYpx.
Final notes
Centering things with CSS caused me some headache as well! I still can’t see how the logic behind it works exactly.
I hope those tips I learned and just shared with you will help you boost fast
And, if you don’t mind taking few minutes to criticize my work, I’d be grateful
Cheers.