I have a requirement where I need to display the last two li elements from an ul list on a new line if the screen width is less than 625px. The code snippet below achieves this functionality:
However, this code fails validation on https://validator.w3.org/nu due to the nesting of p within ul element. Can anyone suggest a simple, effective, and valid solution to achieve the same desired outcome?
What if we encase it in <li>? It seems like @Dialex is hinting at that...
<ul>
<li>...</li>
<li>...</li>
<li><p class="NewLine"></p></li>
<li>...</li>
<li>...</li>
</ul>
To achieve a new line between <li> elements without altering the HTML structure, you can utilize a pseudo element with display: block property.
li {
display: inline;
}
/* Adjust media query value in the snippet */
@media (max-width: 800px) {
li:nth-last-of-type(2)::before {
content: '';
display: block;
/* demo */
height: 2px;
background: red;
}
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>If you are using float: left on your <li> elements in CSS, to break the layout and introduce a new line, you can apply clear: left or clear: both.
ul {
list-style: none
}
li {
float: left;
}
/* Adjust media query value in the snippet */
@media (max-width: 800px) {
li:nth-last-of-type(2) {
clear: left; /* or both */
/* demo */
height: 2px;
background: red;
}
}<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>If you're utilizing float in your code, a simple solution is to clear the float after the second element without requiring any additional elements or hacks.
li {
float: left;
margin:5px;
border:1px solid red;
padding:5px;
}
ul {
list-style: none;
}
@media (max-width: 1200px) {
li:nth-child(3) {
clear:left;
}
}<ul>
<li>AAA</li>
<li>BBB</li>
<li>AAA</li>
<li>BBB</li>
</ul>I've been developing a website similar to 9gag. I attempted to incorporate a voting feature created by someone else, as I'm not well-versed in AJAX requests, but it just doesn't seem to be functioning. My index.php file fetches five posts f ...
Is there a way to target the <p> element using only the id "Standort" as a constant? Any suggestions on how to accomplish this? <section> <header> <h2 class="licht"><span id="Standort" class="-sitemap-select-item-select ...
Hey there! I've been experimenting with a lot of CSS3 effects, but I'm running into issues trying to get the same effects to work on IE 7 and 8. I've been attempting to use CSS3 Pie to help with this. While CSS3 Pie has worked well for som ...
Hello, I am a beginner in the world of coding and currently delving into web development. Recently, I was following a tutorial on creating a hamburger menu but I seem to be encountering some issues with the JavaScript code. I have double-checked my Visual ...
Looking to create a fixed container that is scrollable, while keeping the rest of the page fixed? Check out this Stackblitz example. Here's a component called "PageDefault" that includes a Header and wraps each page in the application (the content of ...
The initial div in the code snippet below showcases the name of a university. When this name is clicked, it activates the function display_people(). This function is responsible for displaying or hiding the individuals associated with that university. The ...
I have set up a CSS element to insert some content. Here's the code: .foo:after { content: "Bold, italics"; } What I want is for the word "Bold" to appear in bold font-weight and the word "italics" to appear in an italic font-style. I know that ad ...
Hey there, I'm curious about using Jquery Ajax to retrieve a numeric value from a website. Any suggestions on where I should begin? Any advice would be greatly appreciated. Thanks in advance! Best regards, SWIFT ...
This task is really testing my patience... I'm attempting to create a layout that resembles the following: Logo img|h1|img The horizontal lines flanking the subtitle serve as a visual guide, like this --- Subtitle --- Below is the snippet of H ...
As I develop my own CMS, I encountered a challenging issue that I couldn't find a solution for on Google... My dilemma lies in creating an edit_settings.php file using AJAX and PHP to integrate my Zend_Config_Ini for parsing and writing purposes with ...
Greetings and thank you for taking the time to read my message. I am relatively new to this, so please bear with me if things seem a bit disorganized. I have constructed a table and am attempting to implement a hover effect to zoom in on a specific cell w ...
I am seeking assistance for a task involving a circle within an hBox. I would like the color of the circle to change when the mouse cursor hovers over it. Is there a way to accomplish this using JavaFX and CSS? If not, what is the recommended approach fo ...
As a beginner in javascript, I am facing a challenge. I want to fetch JSON responses from 2 separate AJAX requests and create 2 different tables. Currently, I have successfully achieved this for one JSON response and table. In my HTML, I have the followi ...
I created a table with 4 columns using the Bootstrap 3 grid system. Instead of utilizing the col-xs-* classes, which work well on mobile devices, I opted for the col-md-* classes. This decision was based on my preference to have larger and more visible ico ...
I've hit a bit of a roadblock. I'm currently working with StockTwits data and their API requires linking 'cashtags' (similar to hashtags but using $ instead of #). The input data I have is This is my amazing message with a stock $sym ...
After creating an animation to simulate an opening door using jQuery, I discovered that it works perfectly on Firefox 24, Chrome 28, and IE 8. However, Safari presents a problem - the door opens but then the "closed" door reappears at the end of the animat ...
Is there a way to make a series of images slide automatically after closing or stopping a video? To see the specific website in question, click here: Upon visiting the site, a video pops up. How can I program the image slides to transition every 7 secon ...
I am attempting to achieve a specific behavior where clicking on a button will trigger the content below to scroll in such a way that only the last item in the list is visible. I have been using jQuery for this functionality, but unfortunately, it is not ...
I am currently working on a BackboneJS/Marionette App and I want to enable users to upload multiple files. Right now, the functionality works when users select multiple files simultaneously, but I would like to give them the option to select one file init ...
My new project involves creating a flashcard system. The idea is that when a question is clicked, it reveals the answer and hides the question. To achieve this, I am currently using the following code: jsFiddle <p id="shown">What is stackoverflow?&l ...