Making desktop and mobile friendly sites - media queries

Question: I built a site using a mobile only template, converted to a PWA, hosted on Netlify from Github. The problem is that the site looks horrible on desktop/laptop. Is there an efficient (Seo Friendly way) to re-direct desktop browsers to a “Desktop Version”? we put quite a bit of money into the PWA and would rather throw up a subdomain hosted on wordpress for the desktop version. What is the best way to do this with a Hugo->Github->Netlify site. (were fine with Mobile visitors, but would prefer to serve up something more aesthetically pleasing for laptop/desktop visitors without giving google SERP a headache. We’ve basically created an amazing mobile experience and a horrible desktop experience.

You will probably need to update your site to use responsive media queries

See https://www.smashingmagazine.com/2010/07/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

This would make your site look correct for users on all screen resolutions.

If you want to further customize the experience and give mobile visits the option to view the desktop version of your site you can use somthing like this:

Demo (view on mobile device): https://s3-us-west-2.amazonaws.com/assets.davidwells.io/demos/responsible/index.html

2 Likes