Changing the screen resolution can cause the LI elements to become disorganized and appear out of

I have a menu that displays multiple links using a styled UL. Everything looks great at 100% resolution, but when I adjust the screen resolution, the links no longer fit within the menu and some end up on another line, causing issues.

My concern is this - if all the elements are aligned properly at 100% resolution, shouldn't they scale accordingly when the resolution changes? The structure of the menu should remain consistent. How can I keep this menu static and prevent the LI from reordering?

Here is my code snippet:

<ul class="top-menu drop" style="margin:4px 10px 0 0;">
//get items from DB to var $Result
while($a_row=mysql_fetch_array($Result))
{
 $menu_id++;
 echo "<li><a href=''>$a_row[main_product_name]</a>";
 echo "<ul class='drop-down' id='menu$menu_id'>";
 //populate the menu UL
 echo "</ul></li>";
}

The CSS for the menu:

.top-menu{
padding:0;
margin:0 10px 0 0;
height:20px;
list-style: none;
}

Answer №1

Consider these two approaches:

1) Utilize a pure CSS method by setting the width of the list elements in percentages to make them fluid. However, if you require different widths for each element, this may become tedious. In such cases, opt for the second option.

2) Implement JavaScript: Monitor the position of the last element and adjust either the padding or font-size accordingly to ensure they all fit on one row.

Answer №2

The reason for this issue is the margin-right being set to margin:0 10px 0 0; in your CSS. The only solution would be to use a media query.

For example:

.style {
    margin-right: 10px;
}
@media screen and (max-width:480px) {
    .style {
        margin-right: 4px;
    }
}

Learn more about media queries here (w3.org)

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

Tips for implementing an HTML dropdown menu for two select elements

Having an issue with the HTML select element. I am trying to create a dropdown select that displays two different prices based on location. For example, when selecting country (Australia) and city (Canberra or Sydney), I want to display prices for 30 days ...

My line occupies an excessive amount of vertical space

Working on a practice website and realizing my CSS skills are a bit rusty. Struggling with the height of a row in my container, as it's taking up too much space. Also, having trouble positioning the second row below the first one without it ending up ...

CSS - revealing additional submenu on hover

I'm currently working on customizing a Wordpress menu that includes classic menu items and their respective submenus. The issue I'm facing is that when I hover over an item with children, its submenu will display. However, I want to have a fixed ...

Ways to Achieve the Following with JavaScript, Cascading Style Sheets, and Hypertext

Can someone help me convert this image into HTML/CSS code? I'm completely lost on how to do this and don't even know where to start searching for answers. Any assistance would be greatly appreciated. Thank you in advance. ...

The progress indicator fails to activate during the first step

As a beginner in coding, I wanted to incorporate a progress bar on my website. However, I encountered an issue where when I try to make step 1 "active", it's actually step 2 that becomes active, and the same pattern continues for subsequent steps. ...

Django static files reference

sample code snippet tooltip reference navigating to the correct file path FILES: settings.py STATICFILES_DIRS = [ BASE_DIR / "static" , ] base.html {% load static %} How can I properly link my static files in the html line below?... &l ...

experiencing difficulty with a background image that is failing to display

I'm having a hard time getting my background-image to show, even though I know it should be an easy fix. Here's the code for the div class where I want the background to display: .sun-face{ background-image: url("./images/Sun_face.svg"); } ...

The functionality of a pop-up window is not compatible with Google Maps

I recently implemented a script on my webpage that triggers a popup window every time the page is loaded. Here's how the script looks: <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>ColorBox de ...

Struggling to get a basic HTML form to function with JavaScript commands

In my form, there are two input fields and a button. Upon clicking the button, a JavaScript function is triggered which multiplies the values entered in the inputs. The result is then displayed in a <p> element and evaluated through an if else statem ...

Divide data into an HTML table and merge it with header information

My HTML form contains an interactive HTML table where users can add/delete rows. I am sending this data to a Google Sheet and need to store the row information with corresponding header details. Each time a user submits the form, a new row is added to the ...

Issue with content not wrapping inside the body tag (apart from using float or setting body and html to 100

Why on earth is the body/html or .main div not wrapping my .container div's when the browser width is between 767-960 px?! This is causing horizontal scrolling and I am completely baffled. This should definitely be working! The only code I have is: ...

Using querySelector to Target Elements by their InnerHTML Content

Is it possible to target an element by its innerHTML directly without the use of loops? Is there a way to achieve this with something like document.querySelector('div[innerHTML="Sometext"]') or document.querySelector('div[textcontent="Som ...

Trouble encountered when trying to use an anchor link with the .slideUp jQuery function

Would you be able to assist me with understanding why my anchor links are not functioning correctly? I have 3 anchor links, for example: Google (not working) Yahoo (not working) Facebook (working) Any insights on why Google and Yahoo are not working? &l ...

The presence of element a within the element ul is not permitted in this particular scenario. Additional errors from this section will not be displayed

Having trouble with this code snippet: <nav role="navigation"> <div id="menuToggle"> <input type="checkbox"/> <span></span> <span></span> <span></span> ...

What could be causing the issue with the width: 100% not rendering correctly in this

I'm currently working on my footer, but I'm having trouble getting the width: 100% tag to work correctly. Here's a screenshot of what I mean: http://gyazo.com/9c23897cd7b9a74ca55ee9fb977f810c This is my CSS code: /*..Portfolio - Lars Beut ...

Assign a value of 0 to the ngModel if it is empty

I am trying to ensure that when the value is null, it defaults to 0. At the moment, I am utilizing Angular PrimeNG components. <p-calendar [(ngModel)]="model.start_time" [timeOnly]="true" placeholder="00:00"></p-calen ...

Optimal method for retrieving data in JSON format

Hey everyone, I've been using Ajax to modify a div on my website. I have a function that works perfectly, but I'm having trouble retrieving the value it returns. updatecart = function(qty, id_product) { var currentVal, data, id, item_hash, ...

Using Javascript to save basic high scores to a server

My JS game involves updating a score variable. When the game reaches a gameOver state, I want to compare the score to one saved on the server. If the player got a higher score, I'd like to overwrite the previous high score with the new one. If it&apos ...

Utilizing HTML in Grails messages.properties for email delivery: A beginner's guide

When working with Grails, I have implemented a GSP template to generate an HTML email using the mail plug-in. Everything functions properly, except for one issue - the GSP template utilizes a parameter that is retrieved from my messages.properties file. I ...

Ajax is invoked only one time

The system is set up to display a follow button and an unfollow button. Clicking the follow button should make the unfollow button appear, and vice versa. Currently, when you click "follow", the database updates and the follow button disappears while the ...