New page, new problems:responsive images and table

HTML & CSS
21

… I had tried that already… and now it works!

I also added

 @media screen and (max-width:720px) {

.single-item img{
width:90%;
margin:0 auto;
}
}

and it seems to be ok on the small devices

Thanks

One small point.

Worse the arrows on both sides are invisible because they are white like the background. I found the code in the script slick-theme.csss and changed all to black but it made no difference!

In any case this scss is not one of the stylesheets in the html. Can’t figure our what it is and why the extension is .scss

I saw this http://stackoverflow.com/questions/29876185/change-the-arrow-buttons-in-slick-slider and the lat answers suggests adding

.slick-prev:after {
  content: "Hello";
  color: red;
  font-size: 30px;
}
.slick-next:before {
  content: "Hello"
  color: red;
  font-size: 30px;
}

I’ve added it to the html and to the bottom of the 2 css files and it changes nothing!

22

Hi

That page was just a test page. Now that the main one is working, it is to be deleted. Thnaks

My next problem is the invisible arrows as per the previous post

23

I changed the color of

.slick-prev::before, .slick-next::before {
    color:black;
}

and they seem quite visible to me.

24

Where are they? I looked in both css files and cannot find them.

Found it!

25

slick-theme.css (line 64)

26

Yes I had found them.

Am i allowed one last request?..

Now that I have the arrows in place, how could I change them to something like this:

27

The Wowslider’s arrows are a background image (sprites).

You can look at the code (HTML and CSS) on their web site and see how they are implemented.

28

Thanks

Over & out!

29

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.