Mobile site

EyeScotch

Hello,

How do I customize my website for Mobile viewing? The banner which I have on my desktop site doesn't fir on mobile version.

Please suggest.


Thanks in advance!

www.eyescotch.com

denisegoldberg

Take a look at Change Features for Mobile or Tablet Browsers for a starting point. That will give you code to target specific-sized screens. You will then need to specify the elements that you want to change.

Before you start I would recommend rethinking your site header. When I looked at your site using this tool - http://quirktools.com/screenfly/ - I see that it doesn't fit well on anything smaller than a 10" screen. You might change the size of your heading plus the placement of the social icons (since the icons easily overlap your header).

--- Denise

tenebs

Mobile version tweaks but need CSS names

denisegoldberg wrote: »

Take a look at Change Features for Mobile or Tablet Browsers for a starting point. That will give you code to target specific-sized screens. You will then need to specify the elements that you want to change.

Before you start I would recommend rethinking your site header. When I looked at your site using this tool - http://quirktools.com/screenfly/ - I see that it doesn't fit well on anything smaller than a 10" screen. You might change the size of your heading plus the placement of the social icons (since the icons easily overlap your header).

--- Denise

The problem I have with tweaking smugmug is not knowing what the CSS names for things are. Is there a source for finding this out?
For instance on my website on the entire site I have a little mini slideshow on the left. However for small screen sizes I would like to hide that feature completely. On my homepage I also have a larger slideshow so I can't just hide all slideshows for samll screens as I do want the homepage slideshow to remain.

So if I knew the CSS names then I would have a better shot of tweaking the code you linked to above.

Allen

Looks like this is the widget class name for the sidebar slideshow on every page.
.sm-page-widget-5615980

In Firefox I right clicked on page element and picked "Inspect Element" in the drop menu.
Had to pick slightly off side.

tenebs

Allen wrote: »

Looks like this is the widget class name for the sidebar slideshow on every page.
.sm-page-widget-5615980

In Firefox I right clicked on page element and picked "Inspect Element" in the drop menu.
Had to pick slightly off side.

Thanks, By using your comment and on from another forum I was able to hide it based on screen size using the following:

/*Hide the mini left slideshow for mobile browsers */
@media only screen and (max-width: 480px) {
.sm-user-ui .sm-page-widget-5615980 { display: none !important; }
}