When the viewport is resized in Chrome, the floated list is pushed below the container

I've been diving into the world of responsive design and media queries in an attempt to create containers that adjust to different viewport sizes. Within my navigation bar, there is a logo div and a floated list with a container.

The main issue I'm encountering occurs when the viewport width is less than 640px and then resized to more than 640px, causing the floated list to disappear - although refreshing the page resolves this. Still wrapping my head around media queries and how to effectively implement them on my site... any tips or suggestions would be greatly appreciated!

JSFiddle

HTML

<div class="navigation">
    <div class="container">
        <div class="logo">
            <img src="http://www.placehold.it/100x54"/>
        </div>
        <ul>
            <li><a>Services</a></li>
            <li><a>Work</a></li>
            <li><a>Contact</a></li>
        </ul><!--
    --></div>
</div>
<div class="container">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

CSS

htmlcss

Answer №1

The reason for this behavior is due to the placement of your div.logo before floating the ul. To address this, try moving <div class="logo"> after ul.

When resizing the browser, the logo may end up below the menu on smaller screens. One solution is to use position:absolute on ul and remove the float:right property, as shown below:

.navigation ul {
   display: inline-block;
   position: absolute;
   right: 0;
   top: 15px;
}

@media screen and (max-width: 640px) {
  .navigation ul {
    width: 100%;
    position: relative;
    top: 0;
  }
}

Answer №2

To solve the issue, simply delete the float:right property from your CSS selector .navigation ul

Answer №3

If you're looking to improve the layout, consider these CSS tweaks:

Include overflow: hidden within .container

Add clear: both in .navigation ul

Also, try applying float: left to your logo only if it exceeds the width of a mobile screen.

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

Increasing margin and padding by a factor of two, achieved through the utilization of float and

Whenever I apply float or inline-block to elements, I notice that their margin or padding appears to be doubled. For example, the margin between the middle and bottom sections is set to 5%. However, the size of the top section is also 5%, but it is only ha ...

htmlcss

Create a responsive DIV element within a website that is not originally designed to be responsive

I am looking to optimize the positioning of an ad div on my non-responsive website. The current setup has the ad displayed at 120x600 pixels, always floating to the right of the screen. While this works well for desktop or large devices, the display become ...

htmlcss

Playing back an Audio object using JavaScript

I'm facing an issue with replaying an audio sound every time the game starts in my Cocos2d javascript code. The sound plays correctly the first time, but subsequent attempts to play it result in no sound being heard. Below is my code snippet: var my ...

javascripthtmlcocos2d-iphone

Discover the ins and outs of utilizing the Google+ Hangout API specifically for chatting purposes

I am currently working on a webpage and I want to include a hangout button that will allow users to connect with me and start chatting automatically when clicked. Here is the code I have so far: <script src="https://apis.google.com/js/platform.js" asy ...

javascripthtmlgoogle-api

Create text that remains hidden behind an image while ensuring the content stays fully

In my website design using HTML/CSS, I am working on achieving a specific layout goal: https://i.sstatic.net/6UUwK.png My aim is to have a div of text positioned behind an image. Although I have successfully accomplished this on a laptop screen, I am fac ...

htmlcsslayout

Is it possible to simultaneously play several one-shot sound effects on mobile web browsers?

I'm attempting to trigger a sound effect when the user clicks a button on my web application. Initially, I experimented with this approach: var sound = new Audio("soundeffect.ogg"); function clickHandler(){ sound.play(); } Unfortunately, if the ...

javascripthtmlhtml5-audio

Solving the default font problem in Laravel

I've been working on a project using Laravel and Bootstrap 4. Recently, I decided to switch from the default Laravel font, Nunito, to Lato. So, I made the necessary changes in my app.css file: @import url(https://fonts.googleapis.com/css?family=Nun ...

phpcsslaravelbootstrap-4fonts

A step-by-step guide on generating a single chip using the same word in Angular

I'm trying to find a solution to ensure that only one chip is created from the same word inputted, instead of generating duplicates. Currently, users can input variations such as "apple," "APPLE," "apPPle," "aPpLe," and I want to automatically conver ...

htmlangularjsangulartypescriptangular-material

Is there a way to align two spans in a TD table so they both start on the same line?

I need to ensure that the two spans within the table are aligned and start simultaneously Here is an image for better understanding https://i.sstatic.net/8F4aN.png .btContentHolder table td, .btContentHolder table th { /* padding: 10px; */ count ...

htmlcss

JQuery displays 'undefined' on checkbox loaded via Ajax

Currently, I am utilizing a checkbox to activate my select Option tag. The select option tag and checkbox are both loaded via ajax. While the select option works perfectly, the checkbox displays as undefined. However, it functions properly in enabling my d ...

javascriptjqueryhtmlajaxcheckbox

Guide on sending information using ajax using a button within a form

I've been working on creating a form that utilizes HTML5 validations and integrates Ajax to show the status of mail sending. However, I'm facing an issue where clicking the send button does not initiate the expected action. Form HTML: <div c ...

javascriptphpjqueryhtmlajax

Enclose a pair of divs within a fresh div wrapper for better organization

Imagine you have the following: <div class="somediv"></div> <div class="somediv"></div> <div class="somediv"></div> <div class="somediv"></div> <div class="somediv"></div> <div class="somediv" ...

jqueryhtml

What is the reason behind the removal of the "disabled" attribute when setting the "disabled" property to false?

Initially, I have a disabled button: <button disabled="disabled">Lorem ipsum</button> When using button.getAttribute('disabled'), it returns "disabled". But once the button is enabled with JavaScript: button.disabled = false; The ...

javascripthtmlformsdom

Using Jquery Simplyscroll to incorporate images on both the left and right side within a container or clip

I am currently utilizing Jquery Simplyscroll (http://logicbox.net/jquery/simplyscroll/) and I am seeking a way to incorporate a faded png image on both the left and right sides to prevent my images from appearing "cut off" while sliding through. Below is ...

jquerycss

Is it possible to customize the Menu hover effect in Element Plus and Vue?

Hello everyone, I'm a beginner with Vue, HTML, CSS, and Element Plus. I am trying to customize a Side Bar Menu with my own hover effect, but it doesn't seem to be working. Whenever I change the background color of the el-menu element, the hover e ...

javascripthtmlcssvue.jshover

How does the <link type=“”> affect your document?

I understand that this tag specifies the file type you are linking to (usually "text/css") for . But what is the reason behind including this information? ...

htmlcss

Obtaining the ID of a moved item in Uikit's nestable component

I am currently utilizing the uikit framework and have a query regarding the nestable component. Despite seeking assistance in various places, none of the solutions seem to match my specific needs. My limited knowledge of JavaScript may be a contributing ...

javascripthtmljqueryuikitjquery-events

Create SCSS to style multiple CSS classes

Are there more efficient ways to create css helper classes like the ones shown below? Can I use scss to generate cleaner and better classes? Thank you. .m-1 { margin: 1px !important; } .m-2 { margin: 2px !important } .m-3 { margin: 3px !important } .m-4 ...

csssass

Retrieve the values of all checkboxes regardless of whether they are checked or unchecked but have the same name

I need assistance creating a form that displays a list of available items for users to select. Users should be able to choose items and input a quantity next to each item. Each checkbox should have an input text box right beside it. <?php foreach ...

phphtmlcheckbox

Can a parent div be resized to accommodate inline-block white-space nowrap content using only pure CSS?

I'm currently exploring possible solutions for making a parent div adjust its size to fit content that is deliberately set not to wrap. To better illustrate my issue, here is a jsfiddle showcasing the problem: jsfiddle.net/wtQfV Here is the code exam ...

htmlcss