Tsunami Coffee - Responsive Website

Projects Skill Path Projects
1

Hello All,

I have completed the required projects, Will appreciate feedbacks.

and here is a link to the website: https://mcheroajdn.github.io/Tsunami_Coffee/

and GitHub codes : https://github.com/MCheroajdN/Tsunami_Coffee

happy coding

1 Like
2

It looks good! Bravo!

3

Thank you. Doing my best to grasp so much at the same time.

1 Like
4

Hello everyone!
Here, in my opinion, is the better solution for task 9:

@media only screen and (max-width: 700px){
  .supporting {
    flex-wrap: wrap;
    align-items: flex-end;
  }
  .supporting img {
    align-self: flex-start;
    min-width: 35px;
  }
}

This will not hide the image, but simply move it up.
(min-width is specified so that the image does not become too small.)

And I would like to discuss another strange thing.

.gallery img {
  display: block;
  width: 30%;
  margin: 1.5%;
  float: left;
}

In the gallery (three small images), for some reason they specify display: block and float: left.
Why not make an inline-block? Why not make a flex-container at all?
What a strange code.

5

And I would like to discuss another strange thing.

.gallery img {
  display: block;
  width: 30%;
  margin: 1.5%;
  float: left;
}

In the gallery (three small images), for some reason they specify display: block and float: left.
Why not make an inline-block? Why not make a flex-container at all?
What a strange code.

Does anyone have an answer for this? Why is there a display: block and a float: left? The display:block seems to do nothing?