CODEWITHSUNDEEP
htmlcsssafarimobile-safari
user5250856
user5250856

Reputation:

Div being stretched on any mobile safari

I have a slideshow with divs which are the selectors for the images. All they are, are just divs with a border. This is what it looks like on every single browser apart from mobile safari

enter image description here

And this is mobile Safari

enter image description here

Here is the css for them:

.slick-dots {
  padding-left: 0px;
  text-align: center;
}
.slick-dots li {
  display: inline-block;
  list-style-type: none;
  margin: 0 3px;
}
.slick-dots li button {
  background: #fff;
  border: 1px solid #000;
  border-radius: 0;
  height: 18px;
  width: 18px;
  opacity: 1;
  color: transparent;
}
.slick-dots li.slick-active button {
  background: #000;
}

.inspiration .slick-dots,
.destinations .slick-dots {
  padding-left: 0px;
}
.inspiration .slick-dots li button,
.destinations .slick-dots li button {
  background: none;
  border: 1px solid #fff;
}
.inspiration .slick-dots li.slick-active button,
.destinations .slick-dots li.slick-active button {
  background: #fff;
}

.slick-slide img {
  display: inline !important;
}

Its a set height and width in pixels of 18px. It looks like if i change the width below 18px it doesn't go any less wide... Has any one seen anything like this before?

Upvotes: 1

Views: 804

Answers (1)

Jishnu V S
Jishnu V S

Reputation: 8409

Please remove your width and height and set css like this

padding:9px;

this may be fix the safari problem

Upvotes: 2

Related Questions