Tips for ensuring a custom list item remains at the top when the screen size decreases

My unordered list with custom bullets is displaying some unexpected behavior.

When the screen size drops below 364px, the list items wrap to two lines. However, the custom bullet ends up on the second line instead of the first. How can I fix this for smaller screens without affecting other sizes?

Any suggestions are greatly appreciated!

#list {
  padding: 0 10px 0 0;
}

#list ul {
  list-style: none;
  padding-left: 0px;
}

#list ul li {
  padding: 0px 0px 10px 40px;
  background: url('https://via.placeholder.com/20') no-repeat;
  background-position: bottom 12px left 10px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d6f6262797e797f6c7d4d38233d233f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div id="list">
  <ul>
    <li><strong>Gratis</strong> omgevingsvergunning check</li>
    <li>Bezoek op locatie</li>
    <li>3D impressie</li>
    <li>Projectbegeleiding</li>
    <li>Bouwvergunningen</li>
  </ul>
</div>
htmlcsstwitter-bootstrapbootstrap-5

Answer №1

It appears that the issue lies with the background position being set relative to the bottom of the li element. To resolve this, try adjusting the background position as shown below:

background-position: top 12px left 10px;


#list {
  padding: 0 10px 0 0;
}

#list ul {
  list-style: none;
  padding-left: 0px;
}

#list ul li {
  padding: 0px 0px 10px 40px;
  background: url('https://via.placeholder.com/20') no-repeat;
  background-position: top 12px left 10px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77776c6b6c6a7968582d3628362a">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div id="list">
  <ul>
    <li><strong>Free</strong> building permit check</li>
    <li>On-site visit</li>
    <li>3D visualization</li>
    <li>Project management</li>
    <li>Building permits</li>
  </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

Obtained a ZIP file via CodeSandbox that contains a Vue.JS webpage. However, the index.html file yielded an

I have created my first ever Vue.JS / Vue2Leaflet app. It runs perfectly fine on codesandbox.io. However, when I download the ZIP file and try to open the index.html file, it appears blank. Is there something specific that needs to be done to make it work, ...

htmlvue.jsleaflet

Close the Bootstrap modal upon clicking the "Ok" button in SweetAlert2

I need help with closing my Modal Bootstrap after clicking the Ok button in SweetAlert. I've attempted various methods, but none of them have worked so far. I'm not sure if I'm implementing it correctly, but I've utilized JQuery for thi ...

htmljquerytwitter-bootstrap

Is there a way to search for text and highlight it within an HTML string using Ionic

Welcome everyone! I am currently utilizing Ionic to load an article from a local HTML string. <ion-content padding> <p [innerHTML]="url"></p> </ion-content> The 'url' variable contains the local HTML string. My goal ...

htmltypescriptionic-framework

Uploading custom images with a WordPress widget

I have been occupied with developing my own WordPress Widget, and almost everything is functioning smoothly except for the WordPress media uploader. I have incorporated eight buttons and input text fields to store the URL of the uploaded image. The click ...

javascripthtmlwordpress

Struggling to center a MatIcon within a MatButtonToggle component in an Angular project

I've been struggling to center the MatIcon in the MatButtonToggle, trying multiple methods without success. It may seem like a minor issue, but it's causing quite a bit of trouble for me. Can someone please guide me on how to make this adjustment ...

cssangulartypescriptsassangular-material

The specified number of columns and width values are being disregarded

The Challenge While using the CSS column-property to create columns on my webpage, I have encountered some unusual behavior with the layout engine. Specifically, I have set up the following styling: body { padding: 0; background-color: black; margi ...

htmlcsscolumn-widthcss-multicolumn-layoutcolumn-count

Safari not centering element with justify-self in CSS grid

My challenge involves adjusting the alignment of a div (mobile menu) that is currently centered using css grid and the justify-self property in chrome. However, when viewed in Safari, it appears on the left side of the screen behind the Instagram icon: ht ...

htmlcssvue.jssafariwebkit

Send an array of data from the view to the Controller in CodeIgniter

I have been searching for a solution to this question. However, for some reason, my code is not functioning properly. Here is what I want to achieve: Data Array -> ajax post -> codeigniter controller(save data in DB and redirect to another page) ...

javascriptphphtmlajaxcodeigniter

Displaying divs of varying heights in a line

I'm facing a challenge in creating floating divs, just like illustrated in the image provided in the link below. Currently, I am employing the float left property to align all the divs next to each other. The first picture displays the default layout ...

jqueryhtmlcss

Using CSS to Showcase the Art Gallery Page

This is my unique gallery display: https://i.stack.imgur.com/RddD8.png Here is the look I am going for https://i.stack.imgur.com/kuOye.png I want to showcase images in a slightly messy yet awesome way However, I encounter an issue when some images have ...

htmlcsstwitter-bootstrapbootstrap-4

AngularJS causing a modal popup to appear even when the associated button is disabled

When using a Bootstrap modal popup form that opens on button click in AngularJS, I noticed that the modal still appears even when the button is disabled. Can someone help me understand why this happens? Here is the code for the button: <a class="btn b ...

javascriptjqueryangularjstwitter-bootstraptwitter-bootstrap-3

The Bootstrap column class is malfunctioning

Recently, I've been diving into the world of web development. I attempted to create three divs in one row using Bootstrap col class, but unfortunately it didn't turn out as expected. Two divs ended up in a row with some blank space, while the thi ...

csstwitter-bootstrap

Creating a webpage that loads directly to a specific section of content

After searching online, I couldn't find the solution I was looking for. My goal is to have the visible part of the page load halfway down the actual page. This way, when users visit the site, they can immediately scroll up to see more content. I hope ...

javascripthtml

Issue with relative input causing Jquery click event to not fire

Jquery $(document).on("click","[type=text]",function(event) { alert('test'); }); CSS .noWorking:focus{ z-index:100; position:relative; outline:none; box-shadow:0 0 0 1000px rgba(0,0,0,.2); } To ensure the shadow appears on top of all oth ...

jquerycssfirefox

Having issues with jQuery append() function not working when concatenating strings

(See complete code below) This specific part of the code $('#' + id).parent().append('<div id="pop-up">hello</div>'); functions correctly. However, when I attempt to use this alternative approach $('#' + id).p ...

jqueryhtmlappendstring-concatenation

Display a pop-up window after a set amount of time and automatically close it when clicking on an

I am looking to implement a functionality where my popup box opens automatically after a specific time interval (e.g. 5000 milliseconds) and can be closed by clicking on an anchor tag placed inside the popup box. function openPopup() { $('.popup- ...

jqueryhtml

Consolidate a two-column layout into a single row using Bootstrap's collapse feature

I'm trying to achieve this specific layout using Bootstrap: ___ ______________ ___ | 1 || 2 2 2 2 || 4 | | 1 || 2 2 2 2 || 4 | | 1 ||__2__2__2__2__|| 4 | | 1 | ______________ | 4 | | 1 || 3 3 3 3 || 4 | | 1 || 3 3 3 3 || 4 | |_ ...

twitter-bootstrapbootstrap-4

Problem with the content-editable attribute

My goal is to make each div with the class .edit editable by adding the contenteditable property: $(document).ready(function() { $(".edit").attr("contenteditable", "true"); }); However, after applying this, I found that clicking on a div with content ...

javascriptjqueryhtml

Struggling to make the CSS :not() selector function correctly as needed

I've been struggling to make the CSS :not() selector work in a specific way and despite searching for solutions, I haven't been successful. I came across some helpful resources like this page, but I couldn't figure it out on my own. Hopefull ...

htmlcss

How can you ensure that an inline <span> automatically moves to the next line if it is too wide?

Struggling with bootstrap badges and trying to arrange <span> elements to appear on the next line when they are too large. On mobile, my page looks like this: Joe Bloggs (Bigger Badge) Joe Bloggs Brother (SMALL BADGE) How can I configure it so t ...

htmlangularbootstrap-5