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; }


Adding an icon to your iPhone for your website, mobile website design

How to add an iPhone icon to your website

In this post we will look at adding an icon to your website for use on the iPhone / iPad, these icons will be shown when users add a link to your website to their devices home page and makes the short cut look more like an app which means it fits in nicely with the rest of the apps the user has on the device.

The first thing you will need to do is create the icon, this needs to be 57px by 57px and 72dpi make sure you save the image as a png the image below is the iPhone icon for this website, feel free to save it and design your icon over the top of it:

One thing to note is the icon will have its shine and rounded corners added automatically by the iPhone so you dont need to add these when creating the icon.

Note: You can prevent the addition of all effects by naming your icon apple-touch-icon-precomposed.png (this is available in iOS 2 and later). Apple

next you need to upload the icon to your website and insert the following code into the head of the site

[code type=html][/code]

The link can be relative if required,

and thats it you now have an icon that will be added to the home page of iOS devices

if you need help with adding the code or creating the icons for your website please feel free to get in touch

[rss]