div.slicknav_menu {display:none;}
        .nav { border-bottom: 0; margin: 0; background-color: #0CF; }
        .nav li a { display: block; text-decoration: none; padding: 0.75em; }
        .nav li ul.sub-menu li a, .nav li ul.children li a { padding-left: 30px; }
        .nav { border: 0; }
        .nav ul { background: #0CF; margin-top: 0; list-style: none; padding-left: 0px; }
        .nav li { float: left; position: relative; }
        .nav li a { border-bottom: 0; }
        .nav li a:hover, .nav li a:focus { color: white; text-decoration: underline; }
        .nav li ul.sub-menu, .nav li ul.children { margin-top: 0; border: 1px solid #ccc; border-top: 0; position: absolute; visibility: hidden; z-index: 8999; }
        .nav li ul.sub-menu li a, .nav li ul.children li a { padding-left: 10px; border-right: 0; display: block; width: 180px; border-bottom: 1px solid #ccc; }
         .nav li ul.sub-menu li ul, .nav li ul.children li ul { top: 0; left: 100%; }
        .nav li:hover > ul { top: auto; visibility: visible; }
        /* ########################
        Content styles
        ######################## */
        main#main img { max-width: 100%; height: auto; }
        img.alignright { float: right; margin: 0 0 1em 1em; }
        img.alignleft { float: left; margin: 0 1em 1em 0; }
        img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
        .alignright { float: right; }
        .alignleft { float: left; }
        .aligncenter { display: block; margin-left: auto; margin-right: auto; }


/*==================== Nav ====================*/
    .nav { float: right; background: none; margin-top: 30px; }
    .nav ul { background: none; }
    .nav ul a { color: #000; }
    .nav ul a:hover { color: #000; }
    .nav ul li:last-of-type a { padding-right: 0px; }

/*==================== Body ====================*/
    .wp-block-image figcaption { color: #888888; margin-bottom: 30px; }
    .wp-block-image.size-full { margin-bottom: 30px; padding: 5px; background-color: #00aade; }
    .wp-block-image.size-full figcaption { text-align: center; color: #fff; margin-bottom: 10px; }
    .article-header img { padding-bottom: 1.5em; }



/*==================== Home Page ====================*/
    .blog-grid { justify-content: space-between; }
    .blog-grid .d-1of3 { width: 30%; flex-basis: 30%; }
    .blog-grid h3 { font-size: 1.1em; line-height: 1.3em; padding-bottom: 0px; }
    .blog-grid p.post-date { padding-bottom: 5px; font-size: 0.8em; }
    .blog-grid p.post-excerpt { font-size: 0.8em; }

    .blackOverlay { background-color: rgba(0,0,0,0.5); width: 100%; height: 100%; display: block; position: absolute; top: 0px; z-index: 1; }

/*==================== Pagination ====================*/
    .pagination, #content .pagination { text-align: center; width: 100%; clear: both; padding: 20px 0px; }
    .pagination ul, #content .pagination ul {display: inline-block;background-color: white;white-space: nowrap;padding: 0;margin: 0;clear: both;border-radius: 3px;}
    .pagination li, #content .pagination li { padding: 0; margin: 0; float: left; display: inline; overflow: hidden; border-right: 1px solid #eaedf2; }
    .pagination a, .pagination span, #content .pagination a, #content .pagination span { margin: 0; text-decoration: none; padding: 0; line-height: 14px; font-size: 14px; font-weight: normal; padding: 0.75em; min-width: 1em; display: block; color: #2592E9; }
    .pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus { background-color: #2592E9 !important; color: white !important; }
    .pagination .current, #content .pagination .current { cursor: default; color: #fff !important; background-color: #2592E9; }
    .pagination .current:hover, .pagination .current:focus { background-color: #2592E9; color: white !important; }


What is responsive website design?

One of the latest trends in website development is something called responsive website design, but what is it and why should it matter to the average user?

Responsive website design

Standard websites are designed for a fixed width to ensure they display correctly on the largest range of desktop / laptop computers, the size that currently fits the most devices is 960px wide. This method ensures websites look the best on as many computers as possible, on smaller screens it fits snugly on normal / average screens it will have a background on each side of the page and on larger screens it will have more background space.

In recent years the boom in mobile devices that can access the internet has increased meaning that users are accessing websites on devices with a wide range of screen sizes and a simple one size fits all approach is no longer viable.

Mobile phone web access has grown dramatically in recent years, rising from 0.2% of all UK web traffic in 2009 to 15% in 2011 Source

The solution to this problem is responsive website design, this method of creating websites involves the design responding to the different screen sizes, the response to smaller screen sizes could be to reduce the size of images or simply remove sections of the website. If you want to see it in action grab the bottom right of the screen and reduce the width of the widow – this website is responsive reducing the width will reduce the size of the logo and remove the side bar before finally changing the navigation to a suitable format for use on smaller screens.

The above images show this website and how it appears on a laptop and on a mobile phone, the advantage of responsive design is that the same website can be used on a range of different devices.

Why should I care?

There are 2 main reasons website owners should be interested in responsive website design, the first is the fact that mobile internet browsing is a rapidly expanding market meaning meaning there is a large numbers of users accessing your website on a mobile device.

The second reason is that a responsive website is a much cheaper option then creating a bespoke proprietary app and has the advantage of working across all mobile platforms making it the most efficient option for people considering converting their website into an app.

Can my website be made responsive? and what should I do next?

Some websites are more suited to being made responsive then others but as long as your site is built using modern web standards (mainly CSS and defiantly not using tables!) then it should be possible to make it responsive.

If you are interested in getting help upgrading your website to be responsive then start thinking about which elements you will re-size and which you will get rid of. Then talk to your web designer who will be able to offer advice, if you need help or want me to offer advice on if its possible to upgrade your website then please feel free to get in contact with me either through this website or via my work as a web developer at Simpsons Creative