help with mobile device viewing please

Chris H

So I'm happy with the way my site looks on a desktop and ipad, but on a mobile (iphone) it falls apart as I guess the css / parameters I've used don't suit smaller screens. Is there an easy way I can simplify the formatting for a mobile screen to just show a base dark grey background with no grading of grey and no orange border down the left. Maybe just with my logo at the top and a simple menu beneath. Even without the slideshows? :dunno

dallasw

For custom CSS that you'd like to only apply to non-mobile devices, try putting it in a media query that limits it to larger devices.

For example, you've added a negative bottom margin to the 'sm-page-widget-logo-img' class to make its bottom even with your logo. This looks great on wider devices, but makes the tagline sit on top of the logo on mobile ones, which is difficult to read. To apply the margin bottom only to larger devices, try:

@media screen and (min-width: 641px) {
    .sm-page-widget-logo-img {
        margin-bottom: -25px;
    }
}

The opposite is also possible. If you'd like CSS to only apply to mobile devices, try something like the following, which will hide the slideshows on your homepage:

@media screen and (max-width: 640px) {
    .sm-page-home .sm-page-widget-slideshow {
        visibility: hidden;
        height: 0;
    }
}

Chris H

dallasw wrote: »

For custom CSS that you'd like to only apply to non-mobile devices, try putting it in a media query that limits it to larger devices.

For example, you've added a negative bottom margin to the 'sm-page-widget-logo-img' class to make its bottom even with your logo. This looks great on wider devices, but makes the tagline sit on top of the logo on mobile ones, which is difficult to read. To apply the margin bottom only to larger devices, try:

@media screen and (min-width: 641px) {
    .sm-page-widget-logo-img {
        margin-bottom: -25px;
    }
}

The opposite is also possible. If you'd like CSS to only apply to mobile devices, try something like the following, which will hide the slideshows on your homepage:

@media screen and (max-width: 640px) {
    .sm-page-home .sm-page-widget-slideshow {
        visibility: hidden;
        height: 0;
    }
}

Awesome, thanks so much for that. I've played about a bit and simplified the mobile view now. Still needs a bit more work but at least it works now.

Cheers