Creating a responsive carousel that is not yet designed

As a beginner, I'm facing what seems like a simple problem that I just can't solve. Here is the HTML code I've written:

<div class="discs container">
    <ul>
        <li><div class="arrowleft"><a href="#" ></a></div></li>
        <li><a href="#" ></a></li>
        <li><a href="#" ></a></li>
        <li><a href="#" ></a></li>
        <li><a href="#" ></a></li>
        <li><a href="#" ></a></li>
        <li><a href="#" ></a></li>
        <li><a href="#" ></a></li>
        <li><div class="arrowright"><a href="#" ></a></div></li>
    </ul>
</div>

I also have the following CSS:

.container {width: 960px; margin: 0 auto;}
.discs {
padding: 16px 0 16px 0;
border-bottom: 1px solid transparent;
outline: 1px solid #333333;
}

/* Remaining CSS properties */

Despite my attempts with using em's for sizes and margins, the layout jumps around when I scale the webpage. How can I make it responsive?

EDIT: You can view a demo of the issue on this JSFiddle link.

htmlcss

Answer №1

Hey, it's best practice not to use pixels (px) for width and other style properties. Instead, try using percentages (%) for a more responsive design.

.box {width: 70%; margin: 0 auto;}

Answer №2

 @media only screen and (max-width: 767px)

This method allows you to customize your CSS according to the specific screen resolutions you are targeting.

Answer №3

By setting a fixed width of 960px on your container, it prevents it from collapsing. Consider using a percentage value instead:

.container{
    width : 80% ;
    margin : 0 auto;
}

This way, the carousel will adjust to be 80% of the screen size. You may also want to explore Twitter Bootstrap for a responsive carousel solution that is already built-in.

Check out Twitter Bootstrap Carousel here

Answer №4

I made a few adjustments to your .discs ul class. Hopefully, this aligns more with what you had in mind:

.discs ul {
    padding: 0;
    height:120px; /*adjust the height as needed */
    overflow:auto;
}

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

Prevent user input in HTML

Currently, I am working on creating the 8 puzzle box game using JavaScript and jQuery Mobile. The boxes have been set up with <input readonly></input> tags and placed within a 9x9 table. However, an issue arises when attempting to move a box ...

javascriptjqueryhtmlinputdisabled-input

Utilize Python to extract information from an HTML table

I am looking to extract data from an HTML table using a Python script and save it as variables that can be later utilized in the same script after loading them in if they exist, into a separate file. Additionally, I would like the script to disregard the f ...

pythonhtmlextract

Determining When to Apply max-height / max-width for Images in CSS

At what point should one consider using max-height or max-width for an image? Is it beneficial if I refrain from mentioning the specific dimensions of the image due to uncertainty? ...

htmlcss

Switch up the like button for users who have previously liked a post

Greetings, I trust everything is going well. I am attempting to implement a feature where users can like a post or article created by others using a button. I have established a const function named "getAPostLikeRecord()," which retrieves a list of users w ...

javascriptcssreactjsfrontend

Use the controller to set the body's background image

Seeking help to update the image URL within the CSS code snippet provided. I would like to accomplish this from the controller and can work with either LESS or SCSS. Is there a solution for this? .background{ height: 100%; width: 100%; backg ...

cssruby-on-rails-3.1view

Can an HTML DOM object be converted to a JSON string using JSON.stringify in JavaScript?

Trying to fetch an external HTML file and convert its body content into a string has been giving me unexpected results. Is there a way to achieve this successfully? var xhr = new XMLHttpRequest(); function loadFile(){ xhr.open("GET", 'index.html ...

javascripthtmljsonxmlhttprequeststringify

My element's padding being overlooked by Tailwind CSS

In the process of developing a comment/response mechanism through MPTT, I am utilizing indentation to clearly designate replies and their respective levels. The comment.level attribute is being employed to establish the padding value. Consequently, a comm ...

htmlcsstailwind-css

"Utilizing Bootstrap's Table Features within the Moodle Platform

Hey there! I'm currently in the process of updating a client's Moodle website. Our goal is to create responsive tables on the homepage, but I've encountered some challenges. Due to conflicts with other Moodle libraries, I wasn't able to ...

cssmoodlebootstrap-table

Button failing to align properly in the center position

I was able to successfully create a responsive input box, but for some reason, the button is not aligned in the center. Below is the CSS code: .webdesigntuts-workshop button { background: linear-gradient(#333, #222); border: 1px solid #444; border- ...

htmlcss

Discover the elusive tag that holds the specified text

My code snippet in HTML looks like this: <body> <div class="afds"> <span class="dfsdf">mytext</span> </div> <div class="sdf dzf"> <h1>some random text</h1> ...

pythonhtmlbeautifulsouphtml-parsing

The image sits on the edge of the container, not fully contained

.sub2 { background-color: #FFFFBF; margin-top: 30px; height: 410px; width: 100%; } h1.sub2 { font: bold 100px american captain; text-decoration: underline; float: right; } p.sub2- { font: italic 25px american captain; margin-top: -300px; ...

htmlcss

Is there a difference in performance between using multiple inline scripts versus one combined inline script?

Comparing Multiple Inline Scripts to a Single Conjoined Inline Script: <script type="text/javascript">/* some codeblock 1 */</script> <script type="text/javascript">/* some codeblock 2 */</script> <script type="text/javascript"& ...

javascripthtml

Looking for a way to make CSS text color for a:hover have higher priority than a:visited?

I'm having an issue with my CSS code that changes the background color when hovering over a link. The text color is white on a blue background during hover, but if there is no hover, it's blue with a white background. Additionally, once the link ...

css

Step-by-step guide to creating a dynamic button that not only changes its value but also

I am trying to implement a translation button on my website that changes its value along with the text. Currently, I have some code in place where the button toggles between divs, but I am struggling to make the button value switch as well. Given my limit ...

javascriptjqueryhtmlcss

When Chrome DevTools are opened, some elements of a webpage undergo a transformation in their style

I've recently started working on a static webpage using VueJS/NuxtJS and Buefy as the UI library, although I am still learning about these technologies. One issue that I have encountered is that certain elements on the page change style when I open C ...

cssvue.jssassgoogle-chrome-devtoolsmedia-queries

Does the rendered ID of an ASPX control always appear the same in the source HTML code?

Let's say I have an aspx textbox with id="txtkms". In the HTML view source, it appears as ContentPlaceHolder1_Gridview1_txtkms_1. I'm curious if this control will always be rendered as ContentPlaceHolder1_Gridview1_txtkms_1 every time I run my as ...

c#javascripthtmlasp.net

What is the best method to detect a change in scroll position on a webpage using JavaScript?

Is there a way to trigger an event when the page's scroll position changes? I'm interested in creating a dynamic table of contents similar to (where the active item changes as you scroll). Can this be achieved without directly accessing the cu ...

javascriptcss

Adjusting the height of one element based on the height of another element in multiple cases using jQuery

I am currently using jQuery to retrieve the height of one div and apply that value as a CSS property to another. Let's take a look at a sample layout: <div class="row"> <div class="column image"> <img src="image.jpg" /> < ...

javascriptjqueryhtmlcssfunction

The dimensions of the bottom border on left floating divs are inconsistent

One of my designers frequently uses a particular technique in various designs, and I'm struggling to determine the most effective way to style it with CSS so that it fluidly adapts (as it will be incorporated into a CMS). Essentially, when implementi ...

htmlcsscss-float

The navigation and title refuse to align in the center

Learning coding from scratch is a challenge, especially when tasked with creating a website for school. Right now, I'm gradually getting the hang of it, but I am struggling to center my navigation and title. Everything looks fine on my 13-inch laptop, ...

htmlcss