CODEWITHSUNDEEP
css
Twix
Twix

Reputation: 387

center slider controls in responsive manner

I want to center the slider controls which you can find here

I tried various ways like right:0; left:0; margin-left:auto; margin-right:auto and two more.

But somehow I am not able to make it center in responsive manner so that in any view port, It always remain center.

So Is there a way to achieve it?

Upvotes: 1

Views: 106

Answers (3)

Andrew
Andrew

Reputation: 1880

This will centre the Your controls without needing to use width but will only really work for modern browsers:

.anythingSlider-minimalist-round .anythingControls {
  position: absolute;
  z-index: 100;
  opacity: 0.90;
  filter: alpha(opacity=90);
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
}

This method will work for older browsers but you will need a fixed width:

.anythingSlider-minimalist-round .anythingControls {
  position: relative;
  z-index: 100;
  opacity: 0.90;
  filter: alpha(opacity=90);
  bottom: 5%;
  width: 190px;
  margin: 0px auto;
}

There are a few other methods to centring a div on a page it might be worth while looking at some other methods here: How to horizontally center a <div> in another <div>?

Upvotes: 1

Jeff Clarke
Jeff Clarke

Reputation: 1397

Put the slider controls in a div that has width:100% and its contents set to text-align:center. Position the div absolute, at bottom:20px (adjust this to set the desired offset from the bottom). Finally, the container that contains the slider controls div needs to be set to position:relative.

div.slider-controls {
  width:100%;
  text-align:center;
  position: absolute;
  left: 0px;
  bottom: 20px;     <----- adjust this until you
}                          like the offset from the
                           bottom of the slider

div.slider-container {
  position: absolute;
}

I don;t know what your layout looks like, but in the above example, it is assumed that div.slider-controls is a child element of div.slider-container.

Upvotes: 0

knocked loose
knocked loose

Reputation: 3304

It looks like they are just being hidden when dropped into mobile. You can reshow them by putting this in your media query for small (mobile) screens.

.anythingSlider-minimalist-round .anythingControls{
  display: block !important;
  margin: 0 auto;
  text-align: center;
  width: 186px;
  position: relative;
  top: -40px;
  right: 0;
  float: none;
  left: 0;
  bottom: 0;
}

Upvotes: 0

Related Questions