How to check whether my website is responsive or not?

Mobile
1

Hey Guys! I have been given a task to convert an already hosted website into responsive. My working knowledge on CSS is below average. In that quest, I heard about media queries. I looked for a solution, but what I got was more confusion. Media Queries…ehh??? I tried responsinator.com and checked my website in that. Actually I don’t know how to know whether a website is responsive or not. My website fits the mobile screens. Header and footer automatically adjusts themselves. There is a big ****ing slider and it just got cropped, but still loads images and works fine. If my website is responsive, how come the slider get cropped?

I have a css for my website.
To make a responsive css, will i have to make any changes to the values in my already existing css? Or will I have to just add my styles (without any edits) into the media queries given below.

@media(max-width:480px){
/PUT YOUR CLASSES STYLES HERE/
}

2

If you have responsive code based on pixel width, all you would have to do is expand and contract the width of any browser.

Also, take a look here, you’re missing some code: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

3

Hi iamsajeev. Welcome to the forums. :slight_smile:

It’s not so easy to retrofit responsiveness, but it can be done. As said, you can adjust your browser width to see how the site responds to different widths, and set appropriate styles where breakpoints are needed. In your media queries, you’ll need to override any rules that are not responsive-friendy, such as fixed widths.

Sliders are especially difficult, as they can be quite inflexible. There are new sliders available that have responsiveness built in (such as bxslider) which are worth considering.

Make sure also to include a meta element in the head of your pages like this:

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