Buttons/links on my Portfolio page aren't working on my mobile devices?

chrismhmoore · Member · Sep 19, 2013 at 6:06 pm
Copy link

Add topic to favorites
I have roll over images that act as links on my portfolio page that aren’t working as links to their corresponding pages within my site. How would i fix this?

The blog I need help with is: (visible only to logged in users)
designsimply · Member · Sep 19, 2013 at 9:13 pm
Copy link
It helps to always link to specific examples. I checked your site and I found your portfolio page at http://chrismhmoore.com/portfolio/

I also reviewed the CSS and found the following example for the first box:
```
.portfolio-box {
	text-align: center;
	color:#666;
	font-family:Consolas, Monaco, Lucida Console, monospace;
	font-size:13px;
	font-size:1.3rem;
	line-height:1.8461538461;
	margin:24px 0;
	margin:2.4rem 0;
	overflow:auto;
	max-width:100%;
	padding:24px;
	padding:2.4rem;
	min-height:24px;
}
#akimbo {
	background: url('http://chrismhmoore.files.wordpress.com/2013/08/akimbo_block.gif');
	font-size:0
}
#akimbo:hover {
	background: none;
	font-size:13px;
	font-size:1.3rem
}
```
:hover won’t work for mobile unless the device can detect hovers (few can right now), and so I think your best option might be to make those clickable by applying the styles you’ve setup to an “a” tag instead of to the container element surrounding them.

I suggest changing “.portfolio-box” to “.portfolio-box a” and adding “display: block;” to it—then update the specific CSS to apply to each link too, so change “#akimbo” to “#akimbo a” and “#akimbo:hover” to “#akimbo a:hover”

Let me know if that gets closer.

For reference: http://stackoverflow.com/questions/2427447/does-css-hover-work-on-mobile-devices

No items found.