Looking to make the bullet point next to an li element larger? The common approach is to eliminate the standard point, add a custom one using the :before selector, and adjust the font size of the added point.
While this technique somewhat achieves the goal, it often leads to misalignment between the text and the bullet point. Take a look at my code here for reference.
Is there a solution that doesn't involve manually adjusting the text's position by specific pixel measurements?
Using absolute positioning for bullet
section {
border: 1px solid black;
display: flex;
justify-content: center;
width: 300px;
}
ul {
font-family: 'Segoe UI';
list-style: none;
padding: 0;
}
li {
font-size: 22px;
line-height: 40px;
position: relative;
padding-left: 30px;
}
li::before {
content: "\2022";
font-size: 70px;
vertical-align: middle;
position: absolute;
left: 0;
}<section>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</section>If I were to present it, I would use an inline-table format and adjust the line-height accordingly.
article{
border: 2px solid #333;
display: inline-flex;
justify-content: center;
width: 400px;
}
ol{
font-family: 'Arial';
list-style: none;
padding: 0;
}
li{
font-size: 18px;
line-height: 36px;
}
li::before{
content: "\2022";
font-size: 60px;
vertical-align: middle;
display: inline-table;
line-height: 0.6em;
}<article>
<ol>
<li>First Item</li>
<li>Second Item</li>
<li>Third Item</li>
</ol>
</article>Having trouble using a session variable in another page? I fetched data from a database and stored it in a variable, but when I attempt to use it on another page, I get an error saying 'undefined index'. See the code below - can someone help me s ...
I encountered an issue while creating a dashboard with a sidebar on the left side. When adding content to the page, some of it ended up hidden behind the sidebar. I tried using overflow-x:auto and this was the result: https://i.stack.imgur.com/5qHJY.jpg Be ...
A background video is currently playing on the site. When the play icon is clicked, the video should start playing in a popup. The video should start playing continuously from the exact moment and position where it is clicked. Check out the example here. ...
My current dilemma involves a session variable email=$_GET['email'];. I am seeking a way to trigger an ajax function only when this variable is available, and to set it to do nothing if the variable is not present. What is the technique for invo ...
Seeking input on a usability issue I'm facing on my site. The homepage of my site has two sets of controls - one for user login and the other for new users to activate their accounts. The problem lies in the activation process. Users receive an acti ...
I have successfully implemented a slip scrolling function to reveal/hide a fixed logo on scroll, but I am facing some issues with Microsoft Edge browser. While testing in various browsers, everything works smoothly except for Microsoft Edge. In this brows ...
I am currently working on a website project using HTML with bootstrap and javascript. I have been attempting to include a toast feature by implementing the code provided on the bootstrap website: <div class="toast" role="alert" aria-live="assertive" ...
I'm currently working on the same page as before but this time, I'm using it to experiment with jQuery. I'm trying to learn it for my 'boss', but unfortunately, I can't seem to get the JavaScript in this file to run at all, le ...
I'm hoping to insert text segments into a MySQL database. Below is an excerpt of my HTML code: <div class="margins3"> <h1>Meal Plan...</h1> <div id='results-container'> <div class='LeanMuscle ...
Currently, I'm delving into the world of JS/AJAX functions that operate without the need for a page refresh or button click. However, I've encountered an issue when trying to echo the value. Oddly enough, when I change this line $email = $_POST ...
For some reason, I've been struggling to debug a piece of JavaScript that should be straightforward. I've experimented with various approaches, such as using a form to access fields and using getElementById. I've also played around with incl ...
I have exhausted all options found on the internet. What could I be overlooking? The desired option is not getting selected. Here is the troublesome section of code. I have also included some other attempts that I have commented out. If it helps, this li ...
Trying to integrate Bootstrap into my portfolio website, but struggling with styling the hr elements. They keep coming out like this: https://i.sstatic.net/IApoi.png They also refuse to center align, always sticking to the left. No idea why this is happe ...
I created this box using Angular Material, but I am having trouble breaking the words "1349" and "New Feedback" into two lines. Here's an image included in my design. Any tips on accomplishing this in Angular Material? Thank you! <style> . ...
Whenever I click a link in my navigation, I want to remove certain images from the page. I tried implementing a solution, but now I have two empty spaces where the images used to be. How can I remove those as well? I searched on Stack Overflow for a soluti ...
Check out the script I've been experimenting with for bringing in a menu from the left: Demo Fiddle To make this work, the sliding DIV needs to not only appear on the left but also push the 'left panel' and 'right panel' accordin ...
I have structured the page with a header at the top and 3 columns below. The left column contains a menu, the middle column is a text container, and the right column is another section. As the page scrolls up, the menu becomes fixed in position which func ...
I'm struggling to achieve a scrolling zoom effect similar to the website mentioned below, but I can't seem to get it to fully zoom. Additionally, when I try to zoom in on a clipped shape or text while scrolling, the entire div ends up scrolling ...
Creating a grid in HTML where clicking on a box will draw an x sign and remove it if clicked again. View the DEMO here. Challenge Description:- I am now looking to implement dragging the cross (x) sign to another grid within the box, but cancelling the ...