Mobile version of site loads thumbs wrong

[climbur 0]

See screenshot. On Climbur.com loaded from an iPhone most thumbnails appear to have grey on the sides instead of filling up the thumb area...

 

How can I fix this?

[catrina 103]

Can you please post a link to your site?

[climbur 0]

Sorry. It's climbur.com!

[James B 436]

Hi there,

 

When your site goes into a responsive mode the items begin to stack, this is so they fit best on the screen for the required mobile device.

 

The css for the thumbnails has a max-wdith set for the size, which keeps them from filling the entire frame when the dimensions of the page changes in the mobile view. You can edit this so the image spans the entire frame (or edit the frame so it stays tight to the image in the mobile view) using css. You'll see in the firebug/chrome inspector the set sizes for the image and the max-width command, which you can either edit to min-width or something custom to tailor to the mobile view only.

 

The mobile layout can be adjusted independantly from the main desktop view using browser specific code. Pagelines has a browser specific plugin which you can download here - http://www.pagelines.com/store/plugins/browser-css/

 

A guide to using the browser specific plugin can be found here - http://support.pagelines.me/docs/plugins/browser-specific-css/