Resizing a link/div with :hover selector for mobile devices

Question

I'm trying to optimize the following site for mobile devices: http://whitehallrow.com/

The blue ribbon links function by using a CSS hover selector to change the image when hovered over:

.ribbonlinkA{
    background-image:url("/wp-content/uploads/2013/05/hr_slide_off.png");
    display:block;
    height:86px;
    width:512px;
}
.ribbonlinkA:hover{
    background-image:url("/wp-content/uploads/2013/05/hr_slide_on.png");
    display:block;
    height:86px;
    width:512px;
}

I've been using width:100% for the images on the page, which resizes them well on my Blackberry. However, I can't get the ribbon links to resize at all; they simply overflow off the right side of the page, even with width:100%.

How can I get them to resize appropriately?

Keep in mind that touch devices don't have much of a concept of :hover states — landons, Jun 12 '13 at 19:13
Please see http://stackoverflow.com/questions/2427447/does-css-hover-work-on-mobile-devices — cmbuckley, Jun 12 '13 at 19:14

score 1 · Accepted Answer · answered Jun 12 '13 at 19:16

1

You'd have to use the background-size property (which isn't supported by all browsers) to get CSS backgrounds to scale. You might be better off using <img> elements, toggled with javascript, for larger images (>320px) like you're using.

answered Jun 12 '13 at 19:16

landons

9,502
3
33
46

Resizing a link/div with :hover selector for mobile devices

1 Answers1