Do my media queries accurately reflect the design?

I am new to web design and currently taking a course. As part of my assignment, I need to make my website responsive. However, I am having trouble with my media queries. Despite hours of research and tweaking, some elements are not responding as expected.

Here are the media queries I have implemented:

/*media queries*/

/*768px*/

@media only screen and (min-width: 768px) and (max-width: 1024px){
    .tm-logo{   
        align-items: center;
    }    
}

@media only screen and (min-width: 768px) and (max-width: 1024px){
    .tm-nav ul li a{
        padding: 20px 30px;
        text-decoration: none;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px){
    .tm-nav ul li{
        display: inline-block;
        background-color: #80c625;
        padding: 10px;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px){
    .divTableBody{
        padding: 5px;
        align-content: center;
    }
}

...

This is a snippet of my CSS:

/*default page style*/

body{
    display: block;
    background-color: #eeeeee;
    font-family: 'Open Sans', sans-serif;
    margin: 0 auto;
    max-width: 100%;
    padding: 0.5%;
}
...

As a beginner, I might have made mistakes in my code and I am open to any feedback or suggestions. I need to submit this assignment tonight and any assistance would be greatly appreciated. Thank you!

Answer №1

Utilizing media queries allows you to organize your code for various screen sizes and combine them efficiently. Consider the following example:

@media only screen and (min-width:768px) and (max-width:1024px) {
   .tm-logo{   
      align-items: center;
   } 

   .tm-nav ul li a{
      padding: 20px 30px;
      text-decoration: none;
   }

   .tm-nav ul li{
      display: inline-block;
      background-color: #80c625;
      padding: 10px;
   }

   .divTableBody {
      padding: 5px;
      align-content: center;
   }

   .more {
      align-items: center;
   }

   .wish {
      width:100%;
      float:none;
      align-items: center;
   }

   .whybody img{
      float: none;
      align-items: center;
   }

   .why-logo { 
      text-align: center;
    }
}

You can replicate this structure for additional queries tailored to different screen sizes.

Answer №2

    @media only screen and (min-width: 768px)and(max-width:1024px) {
  .tm-logo {
    align-items: center;
  }
  .tm-nav ul li a {
    padding: 20px 30px;
    text-decoration: none;
  }
  .tm-nav ul li {
    display: inline-block;
    background-color: #80c625;
    padding: 10px;
  }
  .divTableBody {
    padding: 5px;
    align-content: center;
  }
  .more {
    align-items: center;
  }
  .wish {
    width: 100%;
    float: none;
    align-items: center;
  }
  .whybody img {
    float: none;
    align-items: center;
  }
  .why-logo {
    text-align: center;
  }
  /******480px*****/
  @media only screen and (min-width:320px)and(max-width:480px) {
    .wish {
      width: 100%;
      float: none;
      align-items: center;
    }
    .tm-logo {
      align-items: center;
    }
    .tm-nav ul li {
      display: inline-block;
      background-color: #80c625;
      padding: 10px;
      align-content: center;
    }
    .divTableBody {
      padding: 5px;
      margin: 5%;
    }
    .more {
      align-items: center;
    }
    .whybody img {
      align-items: center;
      float: none;
    }
    .why-logo {
      text-align: center;
    }
    /********footer*******/
    @media only screen and (max-width: 600px) {
      .footer-distributed .footer-left,
      .footer-distributed .footer-right {
        text-align: center;
      }
      .footer-distributed .footer-right {
        float: none;
        margin: 0 auto 20px;
      }
      .footer-distributed .footer-left p.footer-links {
        line-height: 1.8;
      }
    }

You have the opportunity to practice this. Using media queries to adjust layout based on screen size is common, but there are other options available as well. Don't forget the px after 1024 and you can avoid repeating @media only screen and (min-width: 768px)and(max-width:1024px) multiple times :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to remove input focus when clicked away?

I am in the process of developing an application using next js, and I need assistance with designing a search field. The primary functionality I am looking to implement is displaying search suggestions when the user starts typing, but hiding them when the ...

How to conceal 'subnavigation' elements within Buddypress

Hey everyone, I've been looking into how to hide subnav items in a drop-down list. Can this be achieved using just CSS or will I need to write some code for it to work properly? My main goal is to have the sub nav items appear when the user hovers ove ...

Utilizing hyperlinks within NicEdit content and managing events with jQuery

I am using nicEdit, a rich editor, on my website to insert hyperlinks into the content. While I can successfully add hyperlinks using the setContent() method after initializing nicEdit, I am facing issues with handling click events for hyperlinks that have ...

The CSS dropdown menu ends up being positioned underneath the slideshow

Currently, I am working on creating a CSS dropdown menu using CSS3. However, I have encountered an issue where the dropdown menus are going under the slideshow on the page when hovered, making the dropdown items invisible. I am unsure whether I should fix ...

Retrieving the value of a radio button using jQuery and Ajax

Looking for assistance with radio buttons... <input type="radio" id="flip" name="flip" value="Head" checked="checked" /> Head <input type="radio" id="flip" name="flip" value="Tail" /> Tail I'm attempting to process a form with ajax, try ...

The checkbox filter in Angular 6 has the ability to replace the previously selected

I've been working on creating a filter system using checkboxes. Below is a snippet of the code I'm currently using: filter.pipe.ts import { Pipe, PipeTransform, Injectable } from '@angular/core'; @Pipe({ name: 'filter2' }) ...

Is there a way to activate the action in a form's drop down list without using a button?

<form id="form1" name="form1" method="post" action="foo.php"> sort by: <select onchange="this.form.submit()"> <option value="date">sort by date</option> <option value="name">sort by name</option> <option va ...

html Comparison of Documents

My goal is to compare HTML documents to see if they have the same tags in the same arrangement, regardless of different inner text and attribute values. I am only interested in comparing the general tag structure, such as: <html> <head> </h ...

What is the best way to inject child nodes into parent nodes without causing the view to shift to the location where the element is being

While I am rendering elements and appending them to a parent div, my screen keeps jumping to the bottom-most element as it loads instead of maintaining the current view. Ideally, it should start at the top of the screen and remain there without any sudden ...

Using jQuery to arrange information from an API into a table

Currently, I am in the process of learning jQuery as it is a new concept for me. I have attempted to make a request to an example API and received an array of objects that need to be listed in a table. However, I am facing difficulty in sorting it within t ...

How do I adjust the ul size to be proportionate to the header?

I have a list with corresponding hyperlinks in my code, and I am trying to make these elements the same size as the header. I attempted adding auto padding and height auto but it did not produce the desired result. Here is the HTML snippet: <header id ...

Is there a way to adjust the image dimensions when clicked and then revert it to its original size using JavaScript?

Is there a way to make an image in an HTML file change size by 50% and then toggle back to its normal size on a second click using JavaScript? I've attempted to do it similar to the onmouseover function, but it doesn't seem to be working. Any sug ...

Align the radio button in the center of the input field

I have created custom radio buttons, and the last option includes a radio button with an input field. However, in the Codepen example provided, the alignment of the radio button and input field is not centered vertically. I've attempted various soluti ...

Problem with Flexbox Wrapping on iPhone 6

I love the flexibility that flexbox provides, but I've been facing an issue specifically with wrapping on iOS devices. Is there a simple fallback option for handling wrapping? Here's a problem scenario where items refuse to wrap: ( JSFiddle Fans ...

No visible changes from the CSS code

As I create a small HTML game for school, I'm facing an issue with styling using CSS. Despite my efforts to code while using a screen reader due to being blind, the styling of an element isn't being read out as expected. The content seems to be c ...

Issues with positioning images using media queries

Can anyone help me center an img when the viewport width is 320px? I've attempted different approaches but so far, nothing has been successful. .logo { width: 55px; height: 55px; margin: 10px 0 10px 30px; float: left; } @media only screen a ...

Is the appearance of the Select Box altered when using Opera browser?

Here is the outcome I am hoping for. It displays correctly in Chrome, IE and FF: However, this is what I see when using Opera: Check out the demo site: Can anyone offer assistance? ...

Troubleshooting the sidebar pin-unpin problem using Jquery and CSS

I have created a single side panel that allows me to toggle between opening and closing the sidebar by hovering on it. I can also pin and unpin the sidebar by clicking on the pin image. Now, I want to open the sidebar onClick instead of onHover and remove ...

Issue with Website Rendering: Safari 4 exhibits display glitch showing temporary content before showing a blank white screen

Currently, I'm in the process of developing a specialized rails application. However, there seems to be an unusual rendering error that has been reported by Safari 4 users. It's quite peculiar because the page appears briefly but quickly disappea ...

What is the correct way to submit a formarray in an angular application following the specified format?

When submitting a form in Angular, I'm facing an issue where only the data from the first index inside the role menu is being passed. How can I ensure that all index data is passed on submit? { "roleMenu":[{ "menu":{ "menuId": 1 }, ...