Tuesday, December 13, 2011

Size Nivo slideshows for mobile using CSS

Yep, you sure can scale and re-size the Nivo and many other jQuery or Mootools slideshows using CSS media queries.

To get started I am using
The easy-nivo-slider for Wordpress. This is in conjunction with Really Nice NextGen Wordpress Gallery Manager plugin.
(If you need to learn these just visit their respective pages.)

Now to the quick goodies. I am only showing the normal website width and a small mobile. I would reccomend setting another media query for around 768px wide, or go look up common mobile device screen sizes

//Normal width of a website
 .easy-nivo-slider-first
{ 
  width:700px;
}

//CSS media Query for screen sizes less than or equal too 320px wide
@media only screen and (max-width: 320px) {
 .easy-nivo-slider-first
{  
width:300px;
}


Stumble Upon CodePyro

1 comment:

Anonymous said...

Excellent blog here! Additionally your web site so much up fast! What web host are you the usage of Can I get your associate hyperlink in your host I want my site loaded up as fast as yours lol

Post a Comment