Unable to create circular dots within the Slick Slider widget

While attempting to create a slider with dots, I encountered an issue where the dots appeared as ellipses instead of circles, despite setting the width and height to be the same. For instance, I specified width: 12px; height: 12px; but it resulted in a shape of 12x16px. However, the active dot displayed correctly. Below is my CSS:

.slider .slick-dots li.slick-active button{
  background-color: rgb(151, 146, 146);
  width: 12px;
  height: 12px;
  border: none;
}

.slider .slick-dots button{
  font-size: 0;
  width: 12px;
  height: 12px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid rgb(151, 146, 146);
}

View how it appears here

Answer №1

To make it function properly, simply include padding: 5px;.

.slider .slick-dots button{
      font-size: 0;
      width: 12px;
      height: 12px;
      background-color: #fff;
      border-radius: 50%;
      border: 2px solid rgb(151, 146, 146);
      padding: 5px;
}

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

What is the process for retrieving matched information from a drop-down menu in HTML?

Is there a way to retrieve data from angularjs like this: This is the list of data I need to access: $scope.orderStatus = [ { os: 'Open', value: 1 }, { os: 'Completed', value: 2 }, { os:'Cancelled',value: 3 }, ...

Adding a Bold Headline in Select2: A Quick Guide

I have thoroughly searched through all of the select2 documentation but unfortunately, I could not find any information on how to add bold headlines. Can anyone please provide a full code example (including CSS) on how to accomplish this? ...

Conceal the initial element featuring an image

Given that the post-body includes various elements, such as links and divs, I am interested in concealing only the first child element that contains an image. <div class="post-body"> <div class="separator"><img/></div> </div&g ...

My DIV elements are not responding to the widths I set for them. What could be the issue?

Recently, I've been delving into the world of Flex to experiment with some unique layouts. However, I encountered an issue where my divs were not recognizing widths as expected. I attempted to set the first div of each row to 5% width so they would ...

CSS is being applied on Internet Explorer 11 only after a hard refresh with Ctrl+F5

While my website loads perfectly in Chrome and Firefox, I have been experiencing issues with Internet Explorer 11. The CSS is not fully applying until after pressing Ctrl+F5 multiple times. It's strange because some of the CSS is being applied but cer ...

What is the best way to guide a user to a specific page based on the choice they made after submitting a form?

My form includes a list of 6 options where users can only select one. After submitting the form, I want to redirect them to a specific page based on their selection. For example, I have the following 3 options: Facebook Youtube Twitter If a user selects ...

Tips for combining dvloading and required functionalities on the submit button

My form has 2 fields that must be filled out, and I used the required attribute to enforce this rule. Enter A:<input type="text" name="a" required><br> Enter B:<input type="text" name="b" required><br> <button type="submit" cl ...

Switching images between mobile and desktop view in responsive mode is a useful feature for optimizing

Within a specific folder structure, I have a collection of images designated for both desktop and mobile displays: img: img-1.png img-2.png img-3.png img-4.png img-5.png img-6.png img/mobile: img-1.png img-2.png ...

When anchor links (href) are incorporated within a flex layout and flex-direction is set to row, they may not function as

I've designed a website with three horizontal pages, each filling the entire screen. There's a fixed menu with links that scroll to specific pages when clicked. However, users can also scroll horizontally to navigate between screens. If two page ...

Unable to input data into the Database using an HTML Form combined with PHP

I am facing an issue with my MyPHP Database as no records are showing up when I execute these scripts. The environment I am using includes: APACHE 2.4.7 MYSQL 5.6.15 PHP 5.5.8 Let's start with the HTML Code... <html> <center> <f ...

Verifying completed fields before submitting

I'm in the process of designing a web form for users to complete. I want all fields to be filled out before they can click on the submit button. The submit button will remain disabled until the required fields are completed. However, even after settin ...

Using HTML and CSS to implement a broadened perspective for a specific design

https://i.stack.imgur.com/ckQHa.png Hello, I am facing an issue with a UX design that is optimized for 1200px resolution width. However, when the HTML is loaded in a browser on a larger window resolution, there is a 200px gap on the right side. How can I ...

Creating dynamic tables with jquery mobile

When the screen width decreases, I need to find a way to position 3 tables below each other without using float or breaking the jquery mobile layout. Using float: left; on the surrounding containers of each table is not an option as it disrupts the jquery ...

Steer clear of including numerous variable values in Angular 2 while adjusting the class of selected items

Here's a question from someone who is new to Angular 2 and looking for an efficient way to change the active CSS class of tabs without using the router: activeTab: string; switchActiveTab(newTab: string) { this.activeTab = newTab; } <div clas ...

Assistance needed for adjusting margins and padding within the inner content box

I'm currently in the process of designing a new website layout using CSS, but I've encountered some challenges along the way. My main goal is to ensure that all elements stay within the boundaries of the browser window, with the scroll bar appear ...

Ways to obtain data in JavaScript function from HTML

Struggling to pass the key from a database query in HTML using PHP to a JavaScript function? You're not alone. The challenge lies in passing the field_id to the updateRecords() JS function through the onClick() event of an HTML button. Previously, se ...

Tips on utilizing a local file as a background image URL

How can I modify my CSS to link to a local file path like C:\xampp\htdocs\Folder instead of the URL https://source.unsplash.com/1600x1050/?nature. I am currently using Bootstrap 4 and below is my CSS code: .jumbotron{ background: ...

Issue with OpenLayers Icon not appearing on screen

I just finished creating a SpringBoot app using Spring Initializer, JPA, embedded Tomcat, Thymeleaf template engine, and packaging it as an executable JAR file. Within this app, I have integrated OpenLayers 4 library to display a map with an Icon. Howeve ...

What are the steps to incorporate an iframe containing uniquely designed XML content?

I'm currently working on a website project for a client who specifically wants to include news from the BBC. Despite spending 3 hours searching online, I haven't been able to successfully insert an XML file into an iframe and style it to the clie ...

Once the Angular project has been initialized, the Button disable attribute cannot be modified

In my Ionic-Angular project, I am creating registration pages where users input their information in multiple steps. For each step, there is a button that remains disabled until the correct information is entered. An issue arises when transitioning to the ...