Adjusting css / layout for mobile viewing

Chris H

Hi, hopefully this isn't a repeat request. But I've had my site looking the way I want it on big screen for a while now and only just getting round to looking specifically at the mobile site.

Here's how it looks on a desktop:

And below are screen grabs from my iphone 6. I'd like to lose the orange border from the left which appears on my site and also scale down the logo / title text. The main body text disappears off the right of the screen, can this be contained in the width of the screen? I'd also like to tighten up the margins to reduce the amount of scrolling.

Scrolling down takes you to the portfolio categories, again I'd like to lose the orange border from the left and bottom and also tidy up the facebook / linkedin icons and footer, there's too much space there.

Can anyone suggest CSS edit that will allow my main site to remain as it is on big screen but simplify the appearance on mobile viewing?

Main site here for comparison: chrishumphreys.net

Hikin' Mike

Add this to your theme's CSS to remove the orange border on smal devices. Change the width to suit:

@media only screen and ( max-width: 414px ) {

    .sm-page-layout-full {
        border: none !important;
        }

}       

Chris H

Thanks Mike!