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 am currently attempting to assign a background color to a specific style of pop-up, but whenever I use a value that includes an alpha channel, it ends up being transparent. This is the CSS code I have been using: --color: 255, 144, 106, 0.18; background ...
Check out this code snippet : HTML <div class="app-cont"> <div class="app-head"> Additional Comments : </div> <div class="app-main"> balallalalalallalalalala <br/> jaslnflkasnlsnlk ...
When working with a number input and the "onChange" event, I have come across an issue with my ajax request. Upon aborting the request, it seems to have a negative impact on subsequent requests. If I send just one request without aborting, everything runs ...
I am facing an issue with a DOM element that has not been added to the DOM yet, but I want to trigger a DOM event on it. The event is not supposed to bubble up, however, when using jQuery, it does. This behavior seems odd to me. This strange phenomenon c ...
I have a JavaScript function called "display()". I want to hide my navigation menu on click, but it is not working properly - it just blinks. I am looking for a solution that uses only JavaScript and does not involve querySelector. function display() { ...
Why is the browser (Mac Chrome + Firefox) adding extra space after my simple CSS drop-down menu where I have a hidden sub-menu? Check out the code below: <ul> <li>Option Zero</li> <li>Option One Is Longer</li> &l ...
I have created a layout with 3 div elements. The first parent div has a css property of position relative and is taking up the full width of the viewport. The second child div has an absolute position to cover the entire area of the parent. The third child ...
Currently experimenting with the latest version of fullcalendar 5.4.0. I have integrated the calendar into a bootstrap 4 web page that features a fixed navigation bar at the top. The issue arises when attempting to set stickyHeaderDates, aiming to keep th ...
Whenever I input code (t,s) into the system and make changes to it, it automatically transforms into (t, s) with an added space after the comma. Is there a way to avoid VScode from adding this extra space on its own? ...
I have a set of 5 image buttons, each meant to trigger different content within a div. When the page loads, there should be default content displayed in the div that gets replaced by the content of the button clicked. The previously displayed content shoul ...
There is a div named learn-more which expands to fill the whole page when a CSS class is added like this: .learn-more{ padding:10px; font-size: 20px; text-align: center; margin-top:20px; font-family: klight; -webkit-transition:2s; ...
I'm relatively new to AngularJS and JavaScript, but I've managed to create a functional multi-select list. The ng-model linked to the dropdown is part of a "user" DTO object, specifically a property that stores an array of "groups" the user can j ...
Upon executing the following script in Firefox... var d = $("<div class='test'></div>"); d.hide(); $("body").prepend(d); d.show(); ...and examining the HTML, the inserted element will have the style attribute: style="display: blo ...
Currently, I am customizing the default Twitter widget that can be embedded on a website. While successfully injecting styles and making it work perfectly, I recently discovered that after injecting my styles, clicking on a Tweet no longer opens it in a ne ...
As I continue to enhance my front-end development skills and practice Sass to optimize my CSS code, I encountered a roadblock. After exploring resources and tutorials online, I created a global mixin in Sass named 'transition'. Here is the code: ...
I'm currently working on integrating FullCalendar into a Next.js 13 project (T3 Stack) and facing an issue where the style fails to load properly upon navigating back to the page containing my FullCalendar component for the second time. What I'v ...
Can an audio track be played using a font awesome icon, such as displaying the song name (mp3) with a play icon right next to it? When users click on the play icon, can the track start playing and be paused or stopped at will? The list will consist of app ...
I am currently facing an issue with a slide that transitions between four pictures. The slide is set at a specific pace, but I am encountering a problem with the transition from the last slide back to the first one. I have attempted various solutions such ...
I am trying to populate a Swiper slider carousel with images from an array of objects. However, when I use map in the fetch to generate the HTML img tag with the image data, it is not behaving as expected. All the images are displaying in the first div a ...
In the code snippet below, there is a transition inside a table cell with a width of 1px to allow it to wrap its content. However, the table layout changes only at the end or beginning of the transition: var animator = document.getElementById("animator" ...