Adjust the list separator based on screen size fluctuations using media queries

I'm trying to figure out how to manage separators (such as a "-") between each element of a list. It's easy when it's just one line, but I'm having trouble with multiple lines.

On a large screen, my site looks like this:

Example center aligned

<p>
    <a>listitem1</a>
    <a>listitem2</a>
    <a>listitem3</a>
    <a>listitem4</a>
    <a>listitem5</a>
    <a>listitem6</a>
    <a>listitem7</a>
...
    <a>listitemX</a>
</p>

CSS

a:nth-child(n+2)::before {
  content: " - "
}

In CSS, it's simple to add the "-" separator from the second child...

However, with media queries, when the screen gets smaller and the same list spans over multiple lines, I want to remove the last "-" separator from each line.

Example center aligned

Listitem1 - listitem2 - listitem3 - listitem4 (without separator here)
Listitem5 - listitem6 - listitem6 - listitem8 (without separator here either)
Listitem9 - etc ...

Does anyone have any suggestions? Thank you in advance. Sebastian

htmlcssbootstrap-4css-selectorsmedia-queries

Answer №1

If you're looking for a way to handle first-in-line styling in CSS, using JavaScript might be necessary. By toggling a class based on an item's position in the line, you can achieve the desired effect.

Instead of empty content, consider setting the text color to transparent as adjusting content can impact layout stability when wrapping and resizing.

a.firstInLine::before {
    color: transparent;
}

The JavaScript code scans through nodes to determine if an element is lower than its predecessor, applying the firstInLine class accordingly:

function calcY() {
    document.querySelectorAll("p a").forEach((n, i, nodes) => {
        if(i > 0) {
            const thisY = n.getClientRects()[0].y;
            const prevY = nodes[i - 1].getClientRects()[0].y;
            
            if(thisY - prevY > 4) {
                n.classList.add("firstInLine");
            }
            else {
                n.classList.remove("firstInLine");
            }
        }
    });
}

window.addEventListener("resize", calcY);
calcY();

Additionally, ensure proper CSS styling to prevent wrapping and enable correct usage of getClientRects:

a {
    white-space: nowrap;
    display: inline-block;
}

Check out the demonstration on CodePen

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

Allow iframe to be edited within jsfiddle

I have a question that I need to ask soon, but first I need an editable iframe in jsfiddle. It's working fine on my local machine, but not on jsfiddle. I believe it's because of the frames being used? On my local machine, I use: setTimeout(&apo ...

javascriptjqueryhtmliframejsfiddle

Is there a way in JavaScript to prevent the enter key from triggering a mouse click event?

I am facing an issue with my program where I have multiple clickable buttons and the ability to submit by pressing the enter key. However, when I click several buttons with the mouse and then press enter, it not only submits the form but also acts as if ...

javascripthtmlvisual-studiobuttonaddeventlistener

How can you align an icon to the right in a Bootstrap4 navbar while keeping it separate from the toggle menu?

Looking to utilize the Twitter Bootstrap framework for structuring my navbar with distinct "left", "middle", and "right" sections, where the middle portion collapses beneath the navbar-toggler (burger menu) when space is limited. For a self-contained exam ...

csstwitter-bootstrapbootstrap-4

What is the best way to populate a dropdown menu in PHP?

I am trying to populate my combobox with names from an SQL database. I came across some code on W3schools, but I am having trouble integrating it into my own code. Currently, the combobox is filled with select, but that's not the intended functionalit ...

phphtmlajaxcombobox

Transform the appearance of the datepicker with jquery-ui

Is it possible to customize the appearance of the calendar using css files from jquery-ui? <input type="text" id="dob"/> Check out this script: $(document).ready(function(){ $("#dob").datepicker(); }); See an example here. How can I style it ...

cssjquery-uidatepickercdn

The functionality of CSS3 animations may sometimes be unreliable following the onLoad event

Here is a snippet of code to consider: $(function() { $('#item').css({ webkitTransform: 'translate(100px, 100px)' }); }); The element I am attempting to move has the following CSS properties: transform: translate3d(0 ...

javascriptjquerycsstransform

Sending two files to a Node server and retrieving a file through an ajax request

I need assistance with a process involving two file inputs and a button. When the button is clicked, I want to send the two files to the server for processing and then receive a new file as a result. HTML Structure <input id='file-input1' ty ...

javascripthtmlnode.jsajaxexpress

The .click function in jQuery ceases to function after being utilized once

I've encountered an issue with my .click jQuery function. The desired behavior is that when I click the button, one div should be hidden (display:none) and another div should be shown (display:block). This works as expected the first time the button i ...

javascriptjqueryhtmlclickdisplay

Why are XAxis categories appearing as undefined in tooltip when clicked?

[When clicking on the x-axis, the values go from 0 to 1. I need the x-axis categories values to display on click event. When hovering over the x-axis value, it shows properly, but clicking on the x-axis does not show the correct values] Check out this fid ...

javascriptjquerycsshighcharts

Interplay between Node.js and a Website

I have a node.js app running on my computer that receives items from steam users. I want the app to send the item information to a website to store in a database. The challenge is that my website host doesn't allow remote SQL connections, so I can&apo ...

phphtmlnode.jsrequestxmlhttprequest

The placement of a material-ui component at the beginning of the render method can impact the styling of the following components in the hierarchy

After creating some styled components, I noticed that they were not rendering correctly for me. However, when I transferred the code to a codesandbox environment (which had a material-ui button in the template), the components rendered perfectly fine. It w ...

cssreactjstabsthemesmaterial-ui

Utilizing CSS3 Animation for enhanced hover effects

I have a setup with two divs. One of the divs expands in height when I hover over it. What I'm trying to achieve is to display text with a fade-in effect somewhere on the screen when I hover over that specific div. Additionally, I want to show another ...

htmlcsshover

How to extract a one-of-a-kind identification number from the browser using just JavaScript in a basic HTML file?

Is there a way to obtain a distinct identification number from a browser without resorting to techniques such as generating and storing a unique number in cookies or local storage, and without utilizing a server-side language? ...

javascripthtml

Rearranging columns for smaller screens using Bootstrap 4

It is unfortunate that Bootstrap's Beta version has removed the push-* and pull-* classes, making it challenging to reorder columns in xs and sm devices. I am stuck on how to change the order from: [column_1] [column_2] [column_3] to: [column_1][ ...

gridbootstrap-4

What is the best way to showcase validation errors based on required fields in PHP?

When dealing with a form, the challenge arises when there are multiple validation errors to display. The dilemma is whether to show all errors at once or individually as per each field requirement. For instance, consider having fields like Name, Email, an ...

javascriptphpjqueryhtmlvalidation

When using PHP, JavaScript, and HTML, you can trigger an image upload immediately after choosing a file using the

I currently have a small form with two buttons - one for browsing and another for uploading an image. I feel that having two separate buttons for this purpose is unnecessary. Is there a way to combine the browse and upload functions into just one button? ...

phpjavascripthtmlfileupload

CSS radio button not showing up on Safari browser

I am encountering an issue with my vue app where it functions correctly on Google Chrome but experiences problems on Safari. Specifically, the issue arises with components containing radio buttons. Upon clicking on a radio option, the selected color (blue) ...

htmlcssvue.jssafaribootstrap-vue

Show or hide the expand/collapse button based on the height of the container

Looking for a way to hide content in a Div if it's taller than 68px and display an expand option? The challenge lies in detecting the height of the responsive Div, especially since character count varies. I attempted using PHP to count characters bu ...

javascriptphpjqueryhtmlcss

Generating Unique Random DIV IDs with JavaScript

Does anyone know of a JavaScript solution to generate unique random DIV IDs? I am currently using PHP for this purpose. <?php function getRandomWord($len = 10) { $word = array_merge(range('a', 'z'), range('A', &apos ...

javascriptphpjqueryhtmlcss

What could be causing the TailWind CSS Toggle to malfunction on my local server?

While working on designing a sidebar for a ToDo page using Tailwind CSS, I encountered an issue with implementing a toggle button for switching between dark mode and light mode. In order to achieve this functionality, I borrowed the toggling code snippet f ...

htmlcsstailwind-css