What could be causing my Slider to appear incorrectly on my Website?

I need assistance with displaying my Skider (Img) in the center of my webpage. Currently, it is being displayed on the left side and not fully visible. Any help would be greatly appreciated. Additionally, I am facing issues with the header section not displaying properly along with the slider problem.

Below is the code snippet:

<div class="Container">
<div class="Header">
<div class="Slider">
<div class="Center">
   <div class="Chat">
      <div class="Chat_Icon">
         <img src="Slicing & Images/Chat_Icon.png" />
      </div>
      <div class="Live">
         <h5> Live Chat 24/7 </h5>
      </div>
      <div class="Number">
         <h5> +1 970 950 7000 </h5>
      </div>
   </div>
   <div class="Social_Media">
   ...
htmlcss

Answer №1

I have implemented some new styles in the CSS class, you can view the changes on this fiddle link

Here is the HTML code snippet:

<div class="container">
    <div class="slider clearfix">
        <div>
            Slide 1
        </div>
        <div>
            Slide 2
        </div>
        <div>
            Slide 3
        </div>
    </div>
</div>

And here are the CSS updates:

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.container {
    border: 1px solid grey;
    padding: 10px;
    width: 90%;
}

.slider {
    border: 1px solid red;
    margin: 0 auto;
    padding: 5px;
    width: 90%
}

.slider div {
    border: 1px solid green;
    float: left;
    margin: 0 atuo;
    padding: 10px;
    width: 28.50%
}

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

Enhance your Underscores Wordpress Theme by incorporating a secondary sidebar option

Started a new Wordpress site using the Underscores theme (_s) Successfully added one sidebar, but now looking to add a second one with different widgets on the same page. After adding the new sidebar to the functions.php file and seeing it in the Wordpre ...

phphtmlwordpressthemessidebar

What is the best way to adjust viewport settings for child components, ensuring the container size is set to 100vw/100vh for all children

Within my project, I have connected the react-static repository with the react repository using yarn link. "react": "^16.13.1" "react-static": "^6.0.18" I am importing various components from the react-static reposi ...

javascripthtmlcssreactjsviewport-units

jQuery Show/Hide Not Working Properly

I'm attempting to showcase one Tweet at a time and have it rotate through different tweets. I'm facing an issue where it works correctly on one type of page, but not on the other. Could this be due to a CSS precedence rule overriding the function ...

javascriptjqueryhtmlcss

Transferring variables from CSS or HTML to inline SVG

I want to create a unique SVG star rating component using a single SVG. The shape consists of 5 stars filled with a horizontal gradient. Take a look at the following code snippet: <svg width="68" height="11" viewBox="0 0 68 11"> <linearGradi ...

htmlcsssvg

Troubleshooting Problems with CSS Printing on iOS Devices

On desktop (both Windows and Mac), the print preview displays correctly. However, on iOS devices, the full width is not shown and there is some blank space above. The issue I'm facing is that I cannot debug this problem using Browserstack. I am restr ...

cssprinting

What is the best way to implement a hover effect on each direct child individually using CSS?

I have been attempting to create a tab bar with hover effects on its direct children, but I am facing some challenges. Below is the code snippet I have so far, which aims to apply an effect to each element inside the list individually. HTML code : < ...

htmlcss

What is the best way to center-align my list within the designated area?

I need help centering a two column list on my webpage. It's currently justified to the left. How can I adjust it? To see what I'm working with, check out my jsfiddle: http://jsfiddle.net/huskydawgs/c2yqmfzt/5/ <p> A banana is an edible fr ...

htmlcss

The act of selecting a parent element appears to trigger the selection of its child elements as well

I am attempting to create an accordion using Vanilla JavaScript, but I have encountered an issue. When there is a child div element inside the header of the accordion, it does not seem to work and I'm unsure why. However, if there is no child div elem ...

javascripthtmlcss

Adding ttf files to the content script of a Chrome extension

Currently, I am using a content script to inject some HTML into a webpage. My goal is to incorporate the google font named CabinCondensed-Regular, along with several icon fonts that I obtained from IcoMoon. I have already downloaded the necessary font file ...

javascriptcssgoogle-chrome-extensionfont-facecontent-script

ngf-select fails to activate

Having Trouble with AngularJS 1.6.9 File Upload I'm facing an issue with a simple file upload on JSFiddle using AngularJS 1.6.9. The ngf-select event doesn't seem to be triggering even though everything else appears to be working fine, and there ...

javascripthtmlangularjs

What is the best way to combine two sections in html/css/bootstrap?

I've been trying to create a simple webpage with a navigation bar and a section below it, but I keep running into an issue where there's unwanted white space between the nav bar and the next section in blue. Is there a way to eliminate this gap a ...

javascripthtmlcssbootstrap-4

Creating a separation line between divs using HTML and customized Bootstrap styling

I'm currently practicing with bootstrap and HTML, and I would appreciate it if you could take a look at the image I've included. In the image, I have successfully created and displayed a return flight. Moving forward, my goal is to enhance its ap ...

htmlcsstwitter-bootstrap

Using HTML5 canvas to draw circles with additional metadata stored in variables

I'm designing a seating chart that will indicate spots with circles and show a tooltip on mouseover with the person's first name, last name, and possibly other details. I plan to use Kinetic.JS for region/tooltip support based on the tutorials I& ...

javascripthtmlcanvasdraw

Tips for showing a value in a disabled text input box

When users access the page, the table should appear as follows: Marks Per Answer Total Marks Marks Remaining (blank text input) 4 4 (blank text inp ...

phpjqueryhtml

Using JavaScript and HTML, showcase the capital city of a country along with its corresponding continent

As a newcomer to this platform, I am excited to share a code snippet that I have created using HTML and JavaScript. The code generates a textbox in an HTML page where users can type the name of a country. Upon inputting the country's name, the code dy ...

javascripthtml

How can I adjust the font size of information retrieved from a JSON file using ng2-smart-table?

I recently tried using the following CSS code: :host /deep/ ng2-smart-table {font-size:22px;} However, despite implementing this code, I have not noticed any change in the font size. ...

cssangular

Error in parsing the HTML code

However, the issue persists on my website located at The following error message keeps appearing: HTML Parsing Error: Unable to modify the parent container element before ...

javascripthtmlparsing

Issue with rendering <li> elements in Firefox browser detected

I have been working on a website and encountered an issue with the display of list elements in Firefox. The list is not showing consistently in Firefox, but it appears fine in IE, Opera, and Safari. I have attached an image below showing the difference bet ...

htmlcssfirefoxhtml-lists

In CSS, the color inheritance applies when a link is contained within a block of text

Inside the container, the text color is white. However, the link inside the text appears blue instead of white. I have implemented material ui styles for this issue. Although I have tried using the !important tag, it still doesn't work. ...

htmlcssreactjsmaterial-uistyles

Conflicting CSS media queries causing style inconsistencies

Why does the order of media queries affect which style is applied? @media screen and (min-width:660px){ body{ background:darkgreen; } } @media screen and (min-width:480px){ body{ background:navy; } } When the code is written in this order, ...

htmlcssmedia-queries