Why isn't my topmenu positioned correctly on screens of varying widths due to responsive CSS?

Welcome, I am in the process of learning CSS and responsive design.

I have an index page that consists of a header, top menu, main text content, and footer. The top menu layout works well up to 300px, but when it goes under 300px, only the additional links are shifted down without any other changes.

To better understand how the elements behave as the page width changes, I used media queries to temporarily set different colors for the main text and top menu.

I'm trying to figure out where I might be making a mistake. Do media queries need to be structured in a specific way to apply changes to screens with widths less than 300 pixels?

Could someone take a look at the top menu in my index page and the CSS styles in the media queries?

This is my Index page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=4">
<title>registering system</title>
<link href="style-en.css" rel="stylesheet" type="text/css" />
<script src="ref/jquery-1.9.0.js"></script>
</head>

<body onload="" >
    <!-- Your HTML content goes here -->
</body>
</html>

And this is my CSS style:

@font-face {
    font-family: 'headfont';
    /* Font face rules go here */
}

/* More CSS styling rules here */

@media only screen and (max-device-width : 700px){
    /* Media query rules for devices with max width 700px */
}

/* Other media queries and CSS rules follow */

I hope someone can assist me in identifying and resolving the issue I'm facing. Thank you!

Answer №1

After carefully reviewing the provided code snippet, it appears that the solution lies in rearranging the media queries. By reordering them from maximum to minimum width (e.g., from 900px down to 100px), you can resolve the issue as described. Opening the snippet in full-screen mode should demonstrate this adjustment.

This tweak should address the problem effectively and ensure smoother responsiveness for your project.

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

Using Java Swing to apply HTML styling to text strokes

I have come across this code snippet for a Java swing JLabel: "<html>\n" + "<head><style>\n" + "p { color: white;\n" + " text-shadow:\n" + " -1px -1px 0 #000,\n" + " 1px -1px 0 #000,\n" + " -1 ...

using angularjs to dynamically apply css styles

Below is the input I have: The HTML code is shown below: <input type="number" ng-class="{negative: amount < 0}" ng-model="amount"/> This is the corresponding CSS code: .negative { color: red; } If the amount is positive, no specif ...

Can you explain the purpose of using the "overlay" value in the "overflow" property?

Can someone please clarify the distinction between "overlay" and "auto" for me? Is the function of "overlay" similar to that of "auto"? ...

Assistance is required for establishing a connection between php and js. The process begins with executing a sql query to extract the necessary data, which is then encoded into JSON format

I have encountered an issue with a project I am working on solo, involving a sidecart in a PHP file with external links to SQL, CSS, and JS. The problem arose when attempting to insert necessary data into JS using JSON encoding. <?php session_start(); ...

Unable to modify variable to play audio

As I work on constructing my website, I am incorporating various sounds to enhance user experience when interacting with buttons and other elements. However, managing multiple audio files has proven challenging, as overlapping sounds often result in no aud ...

Can a CSS class be added to a form_row in Symfony 4 Twig?

Need help with adding a CSS class to the entire form_row in a Symfony 4 twig template! Currently, my code only adds the class to the input tag, but I require it to be added to the parent div container. Here is the current code snippet: {{ form_ ...

Tips for combining HTML and JavaScript on a WordPress site

As a WordPress developer who is still learning the ropes, I have come across a challenge with embedding html and JavaScript onto a page. Currently, I am in the process of redesigning a company website and one of the tasks involves integrating a calculator ...

Identifying the position of an element as the first, nth, or last child within its parent using ReactJS

I'm currently experimenting with dynamic functionality in ReactJS and I need to determine the position of a child relative to its parent. How can I achieve this in ReactJS? I have come across this post which discusses detecting relationships between ...

Two tables arranged in a nested grid layout

Picture a bootstrap grid setup with an 8:4 layout. <div class="container"> <div class="row"> <div class="col-md-8"> </div> <div class="col-md-4"> </div> </div> </div> ...

What is the best way to line up a Material icon and header text side by side?

Currently, I am developing a web-page using Angular Material. In my <mat-table>, I decided to include a <mat-icon> next to the header text. However, upon adding the mat-icon, I noticed that the icon and text were not perfectly aligned. The icon ...

Attempting to relocate various containers

My task involves handling a group of randomly placed boxes on a webpage, each painted in random colors. I am currently attempting to enable their movement from one location to another. Despite being a seemingly simple task, my lack of familiarity with mous ...

Position the Figcaption over the Image

Running a website, I am facing an issue with adding copyright information to the top-left corner of an image. The img element is set to float:left; and the figcaption appears after it. However, there are some complications: 1) Using the position:absolute ...

Utilizing a background image in the slick slider

<div id="largeCarousel" style="display:inline-block; float:right;"> <div class="homepage-item" style="padding-bottom:52%; position:relative; box-sizing:border-box;"> <div id="largeCarouselContent" style="position:absolute ...

Where could I be missing the mark with AngularJS?

After following some tutorials, I managed to create my first test app. However, it doesn't seem to be working properly. The main objective of the app is to extract product information from a JSON file and display it using ng-repeat. Here are the rele ...

Shift heading 1 as well as heading 2 to the image's right side

Is it possible to position <h1> and <h2> to the right of an image while ensuring that <h2> is displayed below <h1>? Any suggestions on how I can achieve this layout? This is my current code <html> <link rel="stylesheet" h ...

Parsing Images Using JSON and Ajax

I am facing an issue with extracting an image from a JSON file located at this link using jQuery/ajax and inserting it into a div. Despite my efforts, I am struggling to achieve this task due to being new to this field. Your assistance is greatly apprecia ...

How can I match dates in order to run the following code?

If Purchase Date is after 31/Mar/xxxx it should not calculate elap_yend, rem_days, depre_cur, cur_wdv. Also I have to calculate GST with some options that is if SGST and CGST are chosen, I should not calculate IGST else if IGST selected or marked it shoul ...

The focusable attribute in SVG is malfunctioning

I've utilized the focusable attribute to ensure SVG elements receive focus within an HTML document. My goal is to navigate through SVG elements in the SVG tag using the TAB key, as indicated in this resource (http://www.w3.org/TR/SVGTiny12/interact.h ...

Reactively created menu using JQuery

Looking to implement a dynamic JQuery menu using React (ES6). Utilizing the JQuery menu examples (https://jqueryui.com/menu/) as a guide, however, those examples only cover static menus. It doesn't clarify how to modify menu items like updating labels ...

The input focus placeholder at the top is not functioning properly when applied to an input field that

I recently designed an input box similar to this: https://i.stack.imgur.com/lkSnh.png However, I encountered an issue when trying to make the input box readonly. Here is a snippet of my code: .myinput input:focus { outline: none; } ... <div clas ...