need to make this mobile friendly?

[Hobbsie]

Hi all i need to help someone out and make this page mobile friendly?

www.jarlights.co.uk

they put 3 boxes below the image slider but as you shrink the browser the boxes duplicate ;-S

Any kind of help would really be appreciated.

thanks

 

[Scotty123]

There's duplicate html in it which is only visible when the screen is smaller. Deleting it fixes the problem for me.

<div class=boxes>
    
<div class=leftbox><a href="http://jarlights.co.uk/ceiling-lights/" target=""><img src="http://i1381.photobucket.com/albums/ah216/Marginservices/Ceiling-Lights-purple_zpsswidxt8j.jpg" border="0" alt=" Ceiling Lights"/></a></div>
    
<div class=box><a href="http://jarlights.co.uk/table-lights/" target=""><img src="http://i1381.photobucket.com/albums/ah216/Marginservices/table-lights-blue_zpszfm2sdeb.jpg" border="0" alt=" Table Lights"/></a></div>
    
<div class=rightbox><a href="http://jarlights.co.uk/build-your-own/" target=""><img src="http://i1381.photobucket.com/albums/ah216/Marginservices/build-your-own-orange_zps38v5xhmg.jpg" border="0" alt=" Build Your Own"/></a></div>
    
</div>

 

[Hobbsie]

thats weird as there is only 1 location only when i shrinks it duplicates what could that be?

 

[Hobbsie]

ok the code was in the wrong place. sorted that but could anyone help to make it mobile friendly i think you have to att @media and tell it its max size but have no idea.

 

[Cern]

ok the code was in the wrong place. sorted that but could anyone help to make it mobile friendly i think you have to att @media and tell it its max size but have no idea.

According to the Google Mobile Friendly Test the site is already considered mobile friendly.

You can probably fine tune the way the site responds to different devices using @media queries in the CSS (i.e. responsive design). But the main thing is that Google considers the site mobile friendly and so won't downrank it (for mobile access).

 

[radderfire]

ok the code was in the wrong place. sorted that but could anyone help to make it mobile friendly i think you have to att @media and tell it its max size but have no idea.

Yes, the technique is called responsive design. This involves defining media queries in your stylesheet which apply to different screen sizes.

The easiest way to approach it is to start with a mobile design i.e. suited to a screen width of 320px. As the screen gets wider, this design will start to look poor. It's then that you add a breakpoint e.g. at 768px, with a media query to make it look nicer, i.e. you define new styles for that screen size (and above). Typically further breakpoints are added at 992px and 1200px.

 

[McBain]

I've had a look, not seeing any major issues from a mobile perspective. Flying the accessibility flag you're missing some focus states and the likes for keyboard users so it's very easy to lose your position on the site, and you may want to do something with the cookie prompt as it's sitting over the main navigation.

A good practice, imo, is to always apply :focus states wherever you have a :hover state in your css.

Not being critical, just letting you know!

 

[Holst1981]

Works for me on my mobile.

Not pretty but nothing seemed obviously broken.