Responsive website

Hey guys i want to make my website responsive so any idea where should I apply media queries I mean on which element.
https://codepen.io/Ritik-flaee/pen/GRwJozd

If you want a career in web design, I’d suggest to do a proper course. Or work your way through a proper tutorial: https://www.google.com/search?q=learn+responsive+web+design. You will then learn much more than just make your current layout responsive.

The easiest way to visualise what you have to do is to open your page on your desktop at the widest it will go. Next grab the left edge of the browser window and close the window slowly smaller and smaller until you get down to about 320px.

If at any point as the window gets smaller you see something that doesn’t fit or overlaps or just doesn’t look right then that tells you that you most likely need a media query at that width and then change the elements that don’t fit so that they look better.

If you open developer tools and choose toggle device toolbar you can more easily resize the page using the drag arrow when responsive mode is selected and the window size is displayed for you.

If you find that you need loads and loads of media queries that usually means that you haven’t made the page fluid enough and you have been using too many fixed widths and not letting the elements breathe and flow as they should,

I have given you a responsive example of your original header (although the code was based only on the old snippet you posted and is not the correct design) but nonetheless it shows how to go about setting the media queries to make appropriate changes.

Resize the window to see the 3 different type of layouts take effect as space becomes limited for each design.

Responsive design is all about thinking ahead and making choices that will work more fluidly so that you don’t need a 1000 media queries for every pixel of the design.

1 Like

I’m trying to make my navbar responsive but it’s getting mess. Had applied some media query to it but not able to get the desired result. I want to use hamburger menu

[14juness1] ~ Desired result [14juness2] ~ my output

I’ll give you a start but there are a lot of tutorials out there for hamburgers which may help more with your learning.:slight_smile:

The basics are that in the media query you show a hidden hamburger icon and then at the same time hide the current nav.

Then when the hamburger is clicked (either by JS or by the checkbox hack) you show the nav as an absolutely placed navigation dropping down below the blue bar and on top of the container content. You will need to restyle it at this time so that it becomes vertical and appears as you want.

If using the checkbox hack for the hamburger then you need the input as a sibling of the nav so that you can reach the nav with css. I see you had commented out a checkbox hack but that one is using :has which is not fully supported yet. I suggest using the normal sibling combinator to make the menu work.

In your media query at 900px note there is no need for the min-width:300px limit as that is nonsense and you don’t want to exclude anything under 300px. here’s a basic start for some working code.


/* these first rules are not in any media query */
.header-bottom {
  position: relative;
}
#hamburger {
  position: fixed;
  left: -999rem;
  height: 0;
  width: 0;
  border: none;
  overflow: hidden;
  z-index: -1;
}
.hamburger-icon {
  display: none;
}


@media only screen and (max-width: 900px) {
  .leftnav,
  .rightnav {
    display: none;
  }
  .hamburger-icon {
    display: flex;
    border: 1px solid red;
    margin: 0 1rem 0 auto;
    padding: 10px;
    cursor: pointer;
  }
  #hamburger:checked ~ .leftnav {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    background: blue;
    padding: 0;
  }
  #hamburger:checked ~ .leftnav a {
    display: block;
    padding: 0.5rem 1rem;
    margin: 0;
  }
  #hamburger:checked ~ .leftnav a:hover {
    background: #000;
    color: #f9f9f9;
  }

  .header-bottom {
    overflow: visible;
  }
}

The relevant html is now like this.

 <input type="checkbox" id="hamburger">
    <label class="hamburger-icon" for="hamburger">
      <i class="fa-solid fa-bars"></i>
      <i class="fa-solid fa-x"></i>
      menu
    </label>

    <nav class="leftnav">
      <a href="#" style="color:black">Home</a>
      <a href="#" class="menu">About Us</a>
      <a href="#" class="menu">Services</a>
      <a href="#" class="menu">Projects</a>
      <a href="#" class="menu">Pages <i class="arrow down opt"></i></a>
      <a href="#" class="menu">Contact Us</a>
    </nav>
    <nav class="rightnav">
      <button class="button">Pro Version</button>
    </nav>
  </div>
</header>

Note that you will need to style the hamburger as required and I have not styled it at all other than a border so I could see it.

With the above code in place the hamburger will appear at 900px and the nav will disappear. Clicking the hamburger will show the nav with the result as shown in this screenshot. I have left further styling up to you.

Screen Shot 2023-06-14 at 21.38.55

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.