Responsive Website Project

Web Development Full-Stack
1

So i’m trying to complete the Responsive Website Project from the full stack dev. course and i don’t know where to start regarding my header.

The desktop version of my site I think looks fine but when i inspect it in dev tools and switch to mobile the header is way too big.

Any suggestions?

https://diego-aguilar97.github.io/Responsive-Design-Project/

2

Hi @lemillionn !
I can suggest you try the following:

These changes apply to the header CSS rule:

  • Change the property display to just flex. It is not necessary to use inline-flex.
  • Delete the width property. It is not necessary to define it as 100% since the header is a block that uses the whole width of its parent (in this case the body).
  • Delete the height property. The height will be defined by the header’s children, and since you want your image to have 150px of height, then the height of your header will adjust accordingly.
  • Add a gap of 16px. This will avoid that you text + logo touch each other when the viewport is smaller.

Now, if you resize your browser, you will see at something like 500px, that some elements begin to overflow. You can check this also with the browser devTools:
image

So, at this point I would suggest you try resizing the image, changing it from 150px to just 50px, using media queries.

@media screen and (max-width: "500px") {
  #logo {
    height: 50px;
  }
}

This creates a bit more space for the texts:

image
image987×201 53.4 KB

This last media query just buys you a wider range in which the logo is still present and text remains still, but I think that eventually you will need to adjust text sizes as well. In screens with a viewport of less than 500px I would change that h1 to be just 16px in size.

If you don’t mind changing your design, perhaps reordering a bit your markup can make things easier. If you change your header to be like this:

<header>
  <div>
    <img id="logo" src="./resources/images/Alondras.jpeg" alt="">
    <h1 style="font-size: 16px;">Alondra's Cuisine</h1>
  </div>
  <nav>...</nav>
</header>
  1. You can compensate better the big visual weight of your image with the small weight of your texts and achieve something more balanced.
  2. The div allows you to have just two flex items, the div itself and the nav. You can then change your justify-content from center to space-between and achieve something like this:

image

Or you can even extend this and use flex in that div too:

header > div {
  display: flex;
  align-items: center;
  gap: 8px;
}

image

Hope this helps you.

Keep going! :rocket:

4

Wow thank you so much :smile: for your insight !

1 Like