How to create mobile version of my site?


I am kinda newbie so, don’t have much knowledge. Please bear with me.

how to create mobile version of my site?

This is my site…

please help me. thanks.

The standard method for creating mobile sites today, is not to have a mobile version, but create a single version of a site which is responsive. Avoid using fixed widths and heights for main page elements and keep everything fluid so the site will display well on any size screen.


thanks for replying back.

i want to make my site look like does on mobile.

I’m guessing that site does have a separate mobile version, because viewing on the desktop in responsive design view, it’s not fluid, it has a fixed width like yours.

If you use chrome dev tools and click the “toggle device mode” icon it will show the mobile site view.

It looks like they are re-directing to a separate mobile site:

Yeah. Thats what I guessed.

So, how do I proceed making one for my site.

btw, my site is a wordpress site.

Yes, I tried it in Chrome, emulating an iPhone, and I see the mobile site.
Though I suppose a similar thing could be done with a media query or two.

1 Like

wow. that sounds like a quick fix.

can you please with writing the code.

thanks a million again.

Go for it :smile:

Not as straightforward as I make it sound.
Once you add the query, it then need to be filled with lots of css. That is on top of altering the existing css outside of the query to be more fluid, before you get to the breakpoint.
It is quite a bit of work.


Can you please guide me how should I start.

thanks again.

I don’t know anything about wordpress but did you create this site yourself or did you buy a theme?

If you bought the theme then you should see if they have a mobile version available. Most themes these days will be mobile optimised.

Otherwise you are going to have to learn from scratch how to implement media queries and re-style the page which could take quite a while (and that’s assuming you know how to make the changes in wordpress).

The process goes something like this:

Remove fixed widths from your containers and either set fluid or max-widths or a mixture of both.

Adjust the browser window width (wide and small) and when something doesn’t fit re-style it with a media query to make it fit.

Rinse and repeat…

Of course just restyling and changing the menu to a hamburger could take ages with your design and is not a simple task.

If you can’t manage any of the above then perhaps the best course of action is to remove the viewport meta tag from your page.

<meta name="viewport" content="width=device-width, initial-scale=1">

If you remove that tag then the device will scale the page to fit the viewport automatically which will at least make it more usable than as at present although very small.


It may have been better to say it is possible with media queries. I don’t want to give the false impression it’s an easy quick-fix.
The first step would be to try and make what you have already more fluid, so it may squeeze down further before needing a query. That would involve weeding out all those fixed widths and heights, replacing with max-width or a % value where appropriate.
Next is to identify your break point, where you switch to the mobile view, that is where the desktop view no longer fits the screen.
There you add the query and fill it with more css to re-arrange the layout to the mobile view.
It is more work than anyone is likely to “do for you”, so in reality, you maybe need to find some RWD learning resources and find out how to make this work.
Of course, you may still want to ask questions when you get stuck.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.