CSS for bigger stars (mobile)

Mar 23, 2014 at 6:55 PM
A great plugin! I'm relatively new to web development and trying to implement a rating feature in a .aspx page.

I've managed to successful do this and it looks/functions great using the 7a) example posted here (http://www.radioactivethinking.com/rateit/example/example.htm) on a desktop/laptop however on a mobile browser, the stars are still relatively small. Is there a relatively easy way to increase their size when viewing on a browser?

Bhav


My CSS looks something like this:
....
....
div.bigstars div.rateit-range
{
    background: url(star-white32.png);
    height: 32px;
}
 
div.bigstars div.rateit-hover
{
    background: url(star-gold32.png);
}
 
div.bigstars div.rateit-selected
{
    background: url(star-red32.png);
}
 
div.bigstars div.rateit-reset
{
    background: url(star-black32.png);
    width: 32px;
    height: 32px;
}
 
div.bigstars div.rateit-reset:hover
{
    background: url(star-white32.png);
}

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
form {
    margin: 0 auto;
    width: 90%;
}

body,
input {
    font-size: 170%;
}
}
Coordinator
Apr 7, 2014 at 4:03 PM
With a media query you would be able to tackle the CSS part of the resizing issue.
Yet you should still call RateIt and tell it that the size of the stars have changed (see example 12)

There are many 3rd party libs that give you media query support in JS (see for example http://wicky.nillia.ms/enquire.js/), so that you can get a callback when a certain media query is matched.
Apr 8, 2014 at 4:09 PM
gidon wrote:
With a media query you would be able to tackle the CSS part of the resizing issue.
Yet you should still call RateIt and tell it that the size of the stars have changed (see example 12)

There are many 3rd party libs that give you media query support in JS (see for example http://wicky.nillia.ms/enquire.js/), so that you can get a callback when a certain media query is matched.
Thank you. I'll try this.