Hello everyone!

I'm new here and this is my first post. I need your advice on making my blog responsive. I tried to do it using media queries and result is correct in different sizes of browser but It's not displayed properly on mobile or tablet. The entire web page is displayed zoomed out on these devices. Does this mean that I have to use different devices when doing responsive design rather than different browser sizes?

Sorry if my English is poor and thank you in advance for your comments.

Your English is great.

I'm curious how small you made the browser window when you tested the responsiveness?

If you tested on a mobile device, did you upload the pages and CSS to your server, so the mobile devices could read it all?

 

I usually only setup for different browser sizes. You might check the settings in your mobile browser too. You can often adjust mobile browsers to load the full or mobile version of a page.

 

You probably know this guidance page for media queries: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp and this page for helping to test responsiveness online: http://www.responsinator.com/

Edited December 12, 20169 yr by Grant Barker

Mobile browsers scaling the page? A likely cause of this is a missing meta-thing. Check you have this in your <head>

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

Thank you for your comments. I realized that this must be related to my blog platform. This is a small local one I chose just because I wanted to support them and I thought since I have access to the CSS (such as WordPress.com premium) I would be able to make the blog responsive, but I was wrong, it seems I do not have full control over CSS.

If you have the latest version of WordPress the customizer now lets you add your own CSS.

 

Do you have FTP access to the site? If so you can download and edit the theme CSS

I think you can use bootstrap framework for make your website responsive. With the help of Bootstrap on your website there is no chance to face this type of problem.

Hope it helps...

I agree. You can use bootstrap themes on https://www.templatemonster.com/bootstrap-website-templates/ to add your own CSS. I hope it will help you and you won't face this problem again.

So much bad advice in this thread (Aside from the viewport meta tag).

 

First off you shouldn't really be messing with a theme's CSS. you will lose all your changes should you choose to update. If you want a custom theme then build one from scratch. Or choose another that is responsive (Most are still pretty terrible on smaller devices however)

 

Ideally you will learn CSS, learn how media queries work (Not from W3Schools!!) Learn how to lay things out in CSS. This means learn the display types, the box model, measurement unit types - both relative and absolute.

 

Don't just throw Bootstrap at it. It's grid system is limited and you will end up doing a shedload of style undoing or overriding, both of which a big code smells unless you happen to agree with every design decision Bootstrap has made. In which case you will then have a generic Bootstrap website that looks like all the others.

 

If you want an out of the box layout solution and want to visually style things however you choose then I released https://github.com/rbrtsmith/nebula-css.
If you don't know how to use Git, Sass etc you can view the demo page and copy the CSS.

Edited February 5, 20179 yr by rbrtsmith

Hello Folani.

I made a tutorial in two parts for beginners that covers how you can make a responsive website with only about 150 lines of CSS (which is nothing compared to the thousands of lines in the Bootstrap CSS)

I did not make the tutorial for WP specifically so you will have to change my custom classes to the ones that WP generates, The tutorial is done a couple of years ago but uses todays standards and will give you a good understanding of the basic concepts of RWD.

​