SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Apr 2014
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry How to check whether my website is responsive or not?

    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. #2
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    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...ign-in-3-steps
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,200
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hi iamsajeev. Welcome to the forums.

    Quote Originally Posted by iamsajeev View Post
    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.
    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:

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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •