Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Why isn't this slideshow centered.

Posted on 2014-02-17
4
Medium Priority
?
235 Views
Last Modified: 2014-02-17
Me again :)

Why isn't this slideshow centered?

Link to test site
I have this css:
div#centeringwidgekits {
    width: 100% ;
  margin-left: auto ;
  margin-right: auto ;
  
}
       

Open in new window


Thanks!

Rowby
0
Comment
Question by:Rowby Goren
  • 2
  • 2
4 Comments
 
LVL 8

Expert Comment

by:Adrian Crabtree
ID: 39866016
Hi rowby,

The width is set to 100%, so there is no room for margins. If you change the width to 600px (this matches what the content's width is), you should see the slider center.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39866055
Hi Adrian,

Sounds good.  But will it work  in a responsive display if I declare 600px, for example?

However if I have no choice, that is what I'll do.  Fortunately it is a module so I can unpublish it for use on cell phones, for example.

Rowby
0
 
LVL 8

Accepted Solution

by:
Adrian Crabtree earned 2000 total points
ID: 39866074
You can set it to a max-width of 600px. CSS would look something like this:

div#centeringwidgekits {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-width: 600px;
}

Open in new window


Setting a max-width will allow it to be responsive since the width is still declared at 100%.
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39866084
Thanks!

That did the trick!  and thanks for the info regarding max-width.

Rowby
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Suggested Courses

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question