The text becomes jumbled and messy when the browser is resized

I came across this fantastic header design > https://codepen.io/rm/pen/ldhon <. However, I noticed that when the window is resized, the text ends up overlapping. In the demo provided, resizing the window too much causes the issue to become apparent, but my concern is that with a larger font size or more text in the menu, the overlap will happen even faster than shown in the demo.

HTML:

<div class="container">
  <ul>
    <li class="one"><a href="#">Uno</a></li><!--
 --><li class="two"><a href="#">Dos</a></li><!--
 --><li class="three"><a href="#">Tres</a></li><!--
 --><li class="four"><a href="#">Quatro</a></li>
    <hr />
  </ul>
</div>

CSS:

* {
  box-sizing: border-box;
}

body {
  font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}

.container {
  width: 50%;
  margin: 0 auto;
}

ul li {
  display: inline;
  text-align: center;
}

a {
  display: inline-block;
  width: 25%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #333;
}

.two:hover ~ hr {
  margin-left: 25%;
}

.three:hover ~ hr {
  margin-left: 50%;
}

.four:hover ~ hr {
  margin-left: 75%;
}

hr {
  height: .25rem;
  width: 25%;
  margin: 0;
  background: tomato;
  border: none;
  transition: .3s ease-in-out;
}

I'm looking for some assistance with this issue. Can anyone help me out?

htmlcss

Answer №1

I managed to achieve the desired outcome by setting the container width to 100% and giving each element inside the container an equal width to fill it, along with some padding to prevent overlapping. Give this a try:

.container {
  width: 100%;
  margin: 0 auto;
}

ul li {
  display: inline;
  text-align: center;
  padding: 0 20px;
}

a {
  display: inline-block;
  width: 20%;
  padding: .75rem 0
  margin: 0;
  text-decoration: none;
  color: #333;
}

Answer №2

Utilize flexbox to style the unordered list and ensure they wrap when the screen size decreases. Delete the inline displays on the anchor tags.

* {
  box-sizing: border-box;
}

body {
  font: 300 100% 'Helvetica Neue', Helvetica, Arial;
}

.container {
  width: 50%;
  margin: 0 auto;
}

ul{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  list-style: none;
}

a {
  
  width: 25%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #333;
}

.two:hover ~ hr {
  margin-left: 25%;
}

.three:hover ~ hr {
  margin-left: 50%;
}

.four:hover ~ hr {
  margin-left: 75%;
}

hr {
  height: .25rem;
  width: 50%;
  margin: 0 auto;
  background: tomato;
  border: none;
  transition: .3s ease-in-out;
}
<div class="container">
  <ul>
    <li ><a href="#">Uno</a></li>
   <li ><a href="#">Dos</a></li>
   <li ><a href="#">Tres</a></li>
   <li ><a href="#">Quatro</a></li>
    
  </ul>
  <hr />
</div>

Answer №3

  1. Ensure the container width is set to 100%.

  2. Remove ul padding to make it take up the entire 100% width.

  3. Delete body margin setting.

* {
  box-sizing: border-box;
}

body {
  font: 300 100% 'Helvetica Neue', Helvetica, Arial;
  margin: 0;
}

.container {
  width: 100%;
  margin: 0 auto;
}

ul li {
  display: inline;
  text-align: center;
}

a {
  display: inline-block;
  width: 25%;
  padding: .75rem 0;
  margin: 0;
  text-decoration: none;
  color: #333;
}

.two:hover~hr {
  margin-left: 25%;
}

.three:hover~hr {
  margin-left: 50%;
}

.four:hover~hr {
  margin-left: 75%;
}

hr {
  height: .25rem;
  width: 25%;
  margin: 0;
  background: tomato;
  border: none;
  transition: .3s ease-in-out;
}

ul {
 padding: 0;
}
<div class="container">
  <ul>
    <li class="one"><a href="#">Uno</a></li><!--
 --><li class="two"><a href="#">Dos</a></li><!--
 --><li class="three"><a href="#">Tres</a></li><!--
 --><li class="four"><a href="#">Quatro</a></li>
    <hr />
  </ul>
</div>

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 aligning text alongside ons-select elements

I am working with the following HTML snippet: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css"> <link rel="stylesheet" href="https://u ...

htmlonsen-ui

having difficulty retrieving website content using the ui.router

This is my HTML code: <!doctype Html> <html lang="en"> <head > <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/l ...

htmlangularjs

Switch the text style when hovering, then switch it back upon second hovering

Searching for a method to modify the font of individual letters when hovering over them. The goal is for the letters to revert back to their original font after a second hover (not on the first hover-off). Any assistance would be greatly valued! ...

javascriptcssfontsmouseover

Using Vuetify to send a parameter from a select option to a method as a parameter

Just starting out with vuejs and encountering an issue passing parameters from a selected option to my JavaScript method. In my updateClientIsMaster method, the item is always undefined. However, when I added v-on:change="updateClientIsMaster in the & ...

javascripthtmlvue.jsvuetify.js

Looking for ways to ensure React is responsive and feeling a bit challenged by the React mentality?

I'm still getting the hang of ReactJS, and I've been facing some challenges with making React components responsive. For my app, I am utilizing react-tabs. It works well when the screen is wide, but I need to switch to a hamburger panel layout w ...

cssreactjsresponsive-design

Align text within HTML with the use of Bootstrap

Example data value category type item1 100 food fruit item2 50 drinks soda item3 75 snacks chips I want to achieve this forma ...

htmlcsstwitter-bootstrap

Discover the ultimate strategy to achieve optimal performance with the wheel

How can I dynamically obtain the changing top position when a user moves their mouse over an element? I want to perform some checks whenever the user scrolls up, so I tried this code: HostListener('window:wheel', ['$event']) onWindowS ...

javascriptcssangulartypescript

Ionic version 4 ion-img eagerly preloads images instead of implementing lazy-loading

I recently created a horizontal scroller using FlexLayoutModule. It allows me to display a horizontally scrollable list where each item consists of an image and text column. Here's the relevant snippet from my scroller.component.html: <div class=" ...

cssionic-frameworkionic4

Interactive Image Effects with Hover using HTML and JavaScript

I have observed that the transform works fine, but there is a slight issue when initially hovering or touching the image. After the first touch or hover, everything works great. Any assistance on fixing this minor issue would be greatly appreciated. Thank ...

cssimagebootstrap-5mousehover

The HTML output is essential for creating the content of a Bootstrap carousel

Is there a way to populate my bootstrap carousel with the content of an HTML page instead of images? I attempted to create a div and use CSS to load the contents from ac1_div using content:url(carousel_content.html), but it was unsuccessful. <!-- our ...

htmlcsstwitter-bootstrapcarousel

Is it possible to remove the parent element using CSS?

Is there a method to remove the parent element while retaining the current element? Take a look at my example here: <div id="parent"> <div id="child"> <span>some text</span> </div> </div> div { ...

jquerycsshtml

Animations and transitions for cards

import Section from '@/components/section' import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image, Button} from "@nextui-org/react"; import { CSSProperties, useState } from 'react'; const Index = () => { c ...

cssreactjsnext.jsjsxprogressive-web-apps

The scroll bar disappears behind the div

Hello, I am looking to create an HTML layout similar to the one shown below: +----------------------+-----+ | upSide | | |----------------------| | | |right| | |side | | ...

htmlcsslayoutcss-float

Message displayed on picture carousel

<div class="slider"> <div> <img src="http://kenwheeler.github.io/slick/img/fonz1.png" /> <p class="projectname">Project</p> <p class="clientname">Client Name</p> </div> &l ...

javascriptjquerycss

methods for transferring javascript variables to modal

<div> <h5> <a href="<?php echo base_url(); ?>/vendor/home/projects" >Return to Projects</a> </h5> <div> <div class="container"> <div class="row"> ...

javascriptphpjqueryhtmlcss

CSS - borders are overlapping with one another

Encountering an issue where the bottom border is overlapping the right border on the same element. Here's a visual representation of the problem: The green right border's bottom is appearing distorted due to the presence of the gray border at t ...

htmlcss

What is the best way to position a div in relation to a table header (th) but not inside it?

I'm trying to create a table header that displays a help text (div) when clicked on. However, the help div is causing the table header to be larger than the other headers. Below is the code snippet: #help_box { border-radius: 20px; ba ...

htmlcsshtml-tableorientation

Harnessing the power of flexbox for data visualization

Trying to use flexbox to display data from a dataset in my code. Here is the code snippet: <div ng-app="myapp" ng-controller="FirstCtrl"> <div ng-repeat="name in names" class="graph-wrapper"> <div class="aside-1 content"> ...

javascripthtmlcssangularjsflexbox

Naming conventions for initial layout DIVs: Best approaches

As a beginner in the realm of website design, I find myself at the early stages of constructing an HTML/CSS site based on a sketch I've created. In planning out the DIVs for the homepage, I am faced with questions about how to label them and determine ...

htmlcss

Concealing Vimeo's controls and substituting them with a play/pause toggle button

I'm currently working on implementing the techniques demonstrated in this tutorial (), but unfortunately the code in the fiddle I put together doesn't appear to be functioning correctly. I'm at a loss as to what might be causing this issue. ...

javascriptjquerycss