Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How can I make this "responsive"?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #203519
    Matias
    Participant

    Hi guys, my trouble always is this. I make a website nice and beauty but when I view my site on another PC with another resolution all things are in random places.

    How can I make this part of my website responsive and all the other part which I making right now.

    http://codepen.io/anon/pen/LVLppy

    The site on my pc seems like this:

    http://imgur.com/EeQL2G3

    Thanks guys.

    #203526
    Paulie_D
    Member

    You need to start by validating your code.

    You seem to be missing some value px statements

    .Menu ul {
        list-style:none;
        float:right;
        margin-top:45px;
        margin-right:295; /* here */
        margin-left:295; /* and here */
    }
    

    …but other than that it’s hard to understand what the actual issue is.

    #203554
    Matias
    Participant

    Thanks for the replies guys.

    If I understand good is incorrect use margins for place things on a “x” place of the site.

    #203588
    prt
    Participant

    Hi Matias,

    A couple of points not yet mentioned. To make a truly responsive design you should use % whenever possible. For example on your img tag:

    img {width:90%;}

    Also, you should include this line in the head of each page:

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

    Finally, you’ll need to use media queries to fix the break points. That is, using margins can be ok to position elements, but you’ll probably have to specifically code more media queries to fix when they break. Regardless, you’ll still find screen resolutions where your design doesn’t look right, and media queries fix that. Here’s an example:

    @media screen and (max-width:960px){
    img {width:20%;}
    }

    I hope this helps!

    #203591
    Ryan Yurkanin
    Participant

    Hi Matias!

    I’m so glad you are interested in Responsive Design. It really does help to make the web a better place.

    Responsive Design is really a state of mind, and you want to be thinking about it right at the beginning of your project.

    May I suggest this video? https://www.udacity.com/course/responsive-web-design-fundamentals–ud893

    This video is what jump started me with Responsive Design. I hope it does the same for you!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.