I am currently experiencing an issue where the list items bullets (<ul>) and numbers (<o>) are not displaying correctly on my webpage, even after using the overflow-x: hidden

I am facing a challenge with my web page where the list items are not displaying the usual dots and numbers next to them. Interestingly, when I remove the overflow-x: hidden; property in my CSS, the list item numbers and dots show up immediately, although the texts remain visible at all times.

**HERE IS THE HTML CODE**

  <body>
   

        <main>
          <section>
           
              <div>
                <h2 id="getting-started" class="heading-color mt-5">
                  GETTING STARTED
                </h2>
                <p>
                  There are 2 ways to join Fyre Skin Brand Partnership Program.
                </p>
                <ol>
                  <li>
                    Join directly from the Fyre Skin website by clicking the
                    link.
                    <a href="https://brandpartner.fyreskin.com.ng/register"
                      >Register</a
                    >
                  </li>

...

MY CUSTOM STYLING

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap'); 

  /* Setting custom color variables */
  *{
    box-sizing: border-box;
    
   
  }
  body{
    overflow-x: hidden;
  }
:root {
  --primary: #e67e22;
  --secondary: #16a085;
  --success: #2ecc71;
  --danger: #e74c3c;
  --warning: #F0FF42;
  --info: #3498db;
  --light: #f5f5f5;
  --dark: #2c3e50;
 
}

.container
{
  font-weight: 400;


}

img{
  width: auto;
  border-radius: 1rem;
}
a{
  font-family: 'Roboto', sans-serif;
}
p{
  text-align: left;
}
button {
  height: 50px;

  
}
.header{
  margin-left: 50px;
 
}
.sidebar{
  background-color: #F0FF42;
}
.heading-color{
  background-color: #F0FF42;
}
span{
  font-weight: bold;
}
.th{
  background-color: #F0FF42;
}
li{
  font-weight: 600;
}
td{
  font-weight: 600;}

.total{
  text-align: center;
}

  @media (max-width : 450px){
  .container{
    width: 375px;
    margin: 2rem auto;
  }
  
}

I have explored various solutions like using different CSS selectors for targeting the list items and attempting to override the overflow-x property with overflow-x: visible;. However, this resulted in an overflow on my webpage. I have also investigated potential conflicting CSS styles that might be causing the issue but haven't identified any yet.

Answer №1

In the snippet, I can see the numbers and dots for list items.

Give this a try:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');  
  /* Custom color variables */
  * {
    box-sizing: border-box;       
  }
  body {
    overflow-x: hidden;
  }
:root {
  --primary: #e67e22;
  --secondary: #16a085;
  --success: #2ecc71;
  --danger: #e74c3c;
  --warning: #F0FF42;
  --info: #3498db;
  --light: #f5f5f5;
  --dark: #2c3e50;
}   
.container {
  font-weight: 400;        
}    
img {
  width: auto;
  border-radius: 1rem;
}
a {
  font-family: 'Roboto', sans-serif;
}
p {
  text-align: left;
}
button {
  height: 50px;          
}
.header {
  margin-left: 50px;     
}
.sidebar {
  background-color: #F0FF42;
}
.heading-color {
  background-color: #F0FF42;
}
span {
  font-weight: bold;
}
.th {
  background-color: #F0FF42;
}
li {
  font-weight: 600;
}
td {
  font-weight: 600;
}    
.total {
  text-align: center;
}    
@media (max-width : 450px) {
  .container {
    width: 375px;
    margin: 2rem auto;
  }      
}
<html>
  <body>   
    <main>
      <section>
        <div>
          <h2 id="getting-started" class="heading-color mt-5">GETTING STARTED</h2>
          <p>There are 2 ways to join Fyre Skin Brand Partnership Program.</p>
          <ol>
            <li>Join directly from the Fyre Skin website by clicking the link.
              <a href="https://brandpartner.fyreskin.com.ng/register">Register</a>
            </li>
            <li>Join using the link of a brand partner that recommended you and they automatically become you Up-line partner and you their Down-line partner.
            </li>
          </ol>
          <p>If you decide to join, the startup registration is 25,000 Naira with a monthly renewal of 10,000 Naira.</p>
          <p>Your monthly subscription gives you access to</p>
          <ul>
            <li>Your own back office dashboard were you can see your commission, payments, pending payments, bonuses, sales made using your link, clients who bought using your link, team members profile, team members sales and profit and marketing tools.</li>
            <li>Your own personalise Fyre Skin website that your potential clients can shop with.</li>
            <li>Your personalised brand partnership link for potential clients.</li>
            <li>Your personalised Networking link for building your own team.</li>
            <li>Growth and development training for personal growth.</li>
            <li>A community of entrepreneurs that you can learn from.</li>
          </ul>
          <p><span class="fw-bold">How to get started - </span>For us at Fyre Skin convenience is everything that why we built a website that’s swift and easy to access by both brand partners and clients.</p>

<!-- Remaining HTML content unchanged -->

                  <div class="heading-color ">
                    <h5 class="total">OVERALL TOTAL =54,000</h5>
                  </div>
                </div>
              </div>

<!-- Remaining HTML content unchanged -->
              
            </div>
          </div>
        </div>
      </section>
    </main>
  </body>
</html>

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

How to handle users with disabled Javascript? Considering redirection to alternate sites for users with script disabled?

I've dedicated today to strategizing the best approach for revamping our company's website, taking into consideration that less than 1% of web users have JavaScript disabled. Our management team strongly believes in ensuring that our website rem ...

Is there a way for a DOMWindow popup to automatically resize to fit its

Currently exploring JQuery and learning on the fly, I'm wondering if there's a method to automatically adjust the size of a DOM window based on its content? I've successfully modified the parameters to accept % width and height instead of p ...

Styling with CSS to ensure divs are displayed in two rows

Check out this example I found: https://jsfiddle.net/n3qs0wke/ .wrapper { max-width: 600px; border: 1px solid #333; } .big-div { min-width: 212px; min-height: 212px; max-width: 212px; max-height: 212px; display: inline-flex; ...

Is there a way to shift this modal to the right?

I am facing an issue with aligning a button modal to the right side. I attempted using bootstrap classes like : float:right, mt:20 Unfortunately, these did not have the desired effect. Below is my code snippet: <b-modal ref="my-modal" hide-fo ...

Issues with Bootstrap column rendering in IE11's Flex layout

I need assistance with the code below: .hero{ background:lightgrey; padding: 50px 0px; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E26 ...

Transform the binary image data sent by the server into an <img> element without using base64 encoding

It's been a challenge trying to find a reliable method for adding custom request headers to img src, so I'm experimenting with manually downloading the image using ajax. Here is an example of the code I am working on: const load = async () => ...

Trim the edges of a photo and add the Kinetic filter

Currently, I am utilizing Kinetic for image processing purposes. The issue arises when I crop an image and then attempt to convert it to black and white by clicking a button. Unfortunately, the straightforward setFilter function does not seem to work in th ...

Tips for aligning a div containing an image in the center of another div

Trying to perfectly center an image inside a div both vertically and horizontally using the display inline-block property. HTML <div class="center-wrapper"> <div class="image-holder"> <img src="picture.jpeg" alt="Centered Image"> ...

Strategies for locating the third most recent date within a set of dates

A series of dates is provided in the form of an array list: Example: 11/02/2012 21/04/2019 12/03/2061 11/09/1961 22/08/2014 The task at hand is to identify and return the third most recent date from the aforementioned list My instinct tells me that we n ...

How can I integrate Django Bootstrap crispy forms into my default signup and login pages?

After successfully setting up user account signup and login pages based on this guide, the functionality is in place but the pages lack any visual appeal. In search of a quick solution to enhance the appearance of "templates/registration/login.html" and "t ...

"Embed a div element over a full-screen iframe or image

Is it possible to create a div within a fullscreen iframe without using JavaScript? I want to achieve a similar layout to the Netflix player, with static buttons and functions in PHP. The div should have a cut background positioned on top of the iframe. ...

Steps for eliminating an element using jQuery from a variable filled with HTML code

I'm developing a forum where users have the ability to quote other users' comments. When a user clicks on "quote" for a comment, it captures the HTML of that comment and displays it in a box that says Quote: Original post by a member, similar t ...

Selector in CSS targeted by using target selector

When you click on the anchor tag "Click me," is there a way to use only CSS to display the p tag with the text "This is my answer"? I am aware that placing the p tag after the anchor tag is a solution, but I am curious if there is a method to achieve this ...

Unable to view images on Wordpress theme

I am currently facing an issue where some images in my asset folder are not displaying properly when I convert my HTML/CSS/JS template to Wordpress. The main problem is with the image that should show up when you first visit the website. Below is the CSS c ...

Guide to Automatically Refreshing Rows in a Vue.js Table with Live Data Updates

Yes, I can provide the translation for you: Hello, I have a query regarding creating a simple editor resembling Excel, with the functionality to automatically save data in the database when a cell value is modified. Currently, I have to manually click the ...

Set the dropdown item as selected using AngularJS

I have created a demo of an AngularJS dropdown menu, and it's working perfectly. Now, I want to make the selected item appear active. I'm not sure how to achieve this. Can anyone please assist me? I am using the Angular-Dropdown.js library. Here ...

What causes the list(set([2,1,3,6,5,3,6,4])) to automatically rearrange the elements?

As I was exploring the use of the set function in Python, I came across something interesting. Despite knowing that sets are unsorted and based on hashes (as discussed in this Stack Overflow post), I found it strange that when I applied the function to th ...

Why are the buttons on my HTML/JavaScript page not functioning properly?

I have been struggling with a code for a 5 image slideshow where the NEXT and PREVIOUS buttons are supposed to take me to the next and previous slides. However, when I press them, nothing happens. Can anyone provide some assistance? I need additional detai ...

Angular 6 issue: Bootstrap 4 carousel indicators not responsive to clicks

I am currently working on incorporating a Bootstrap 4 carousel into my application, but I seem to be encountering issues with the indicators. Ideally, clicking on any of them should navigate you to the corresponding photo, similar to this example: https:// ...

Having trouble selecting content in an HTML document using Xpath and response.css with Scrapy?

Something is quite puzzling me and I've been pondering over it for almost a week now. Perhaps the solution is staring right at me and I just can't see it clearly... Any hints for alternative approaches would be greatly appreciated. I have n ...