• Subscribe
    Fill something at the
    'Theme option > Overall Elements > Top Bar > Top Bar Subscribtion' section
0424 918 566
sarah@fizbitswebdesign.com.au

responsive website design for a variety of screen sizes

Improvements to the mobile version of Little Snail

I spent a couple of hours yesterday fixing up one of my clients mobile version of their website. Although most WordPress themes are designed to be responsive and will change the layout of your site to fit a mobile or tablet screen, often some tweaks are needed.

css tweaks for mobile site

In the case of the Little Snail website, the logo was not centred on the mobile screen. The logo is actually different to the logo on the desktop site, because the desktop logo forms the entire header of the site. I fixed the centring of the logo by adding a negative margin to the image to move it to the right 40 pixels (px). It now displays in the centre!

centred logo on responsive site

Secondly, the featured hero image that has a call to action button on the desktop was not displaying properly on mobile. Some of the image was cut off and it did not convey the desired visual effect on the mobile. I fixed this through trial and error. In the end, I discovered that the parallax image was defined as a background image. So, I increased the size of the image to fit the mobile screen properly and encompass the call to action button.

There was a problem with the image repeating within the available space, so I instructed the background image not to repeat. Finally, I defined a negative bottom margin to move the text below the background image closer to the image, rather than having a huge gap before the next piece of content.

little snail slider - desktop

I was also able to change the colours of the flyout menu to make them more harmonious with the colours of our website. This was simply a matter of changing options in the plugin settings.

mega menu colours - Little Snail desktop

It is so great that it is possible to define CSS styles specific to the device in question. It means that I can have a different logo on the mobile site, as well as different styles, without affecting the desktop version.

mobile screen - little snail

The final result is not perfect, but it is definitely an improvement. It is important to check the appearance of your site on mobile after any major update. You will probably find that a huge proportion of your visitors are viewing your site on their mobile. It is worth it to make the necessary adjustments to bring the best version of your site to this audience.

Leave a Reply