#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    6
    Rep Power
    0

    Dealing with different screen resolutions?


    Hello there,

    I'm fairly new to website design and I was wondering if anyone here would be so kind as to explain how or link me with some information on how to work with different resolutions in CSS. I'm having trouble positioning images and how they appear in resolutions that are not 1920 x 1080.

    If I change resolution on my computer to see how the page is displayed in different resolutions the images on the website appear displaced like so:

    My View (1920x1080): Gyazo - 2c32815040b92435b9bb0667c6a5a324.png

    Different Resolution (1600x900): Gyazo - 8c6e6b3972385ab78386f36ea6c26e75.png

    I've read that maybe liquid/fluid layouts maybe be a potential fix? I've also read about putting images in a container, but I'm not quite sure how. I don't suppose you could link me to some decent articles on how I could achieve this?

    Thanks for your help.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,288
    Rep Power
    189
    The most modern technique for what your wanting to do is called "media queries". Do an online search for this and you should get several examples and/or ideas on how to make your site multi-resolution friendly.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    6
    Rep Power
    0
    Originally Posted by web_loone08
    The most modern technique for what your wanting to do is called "media queries". Do an online search for this and you should get several examples and/or ideas on how to make your site multi-resolution friendly.
    Thanks for the reply, just as I checked this thread I was reading some articles on Media Queries.
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2015
    Location
    New Delhi
    Posts
    2
    Rep Power
    0
    When dealing with different kinds of screen resolutions, the responsive layout is the safest option. This is achieved using @media in your css and adding a Viewport Meta tag in the <head> section
    Last edited by Nilpo; January 12th, 2015 at 02:33 PM.
  8. #5
  9. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,309
    Rep Power
    1501
    I could not agree with web_loone's reputation comment any more. Using a library is a not a solution to a problem. Learning the fundamentals of what you want to do is. Once you have a handle on that, libraries can make it quicker and easier moving forward.

    I'm tired of seeing thousands of questions across the internet asking for help to a problem in jQuery because they do not know JavaScript. Since jQuery IS JavaScript, it makes no sense to try and use it without learning JavaScript first. In fact, it's impossible. Without JavaScript, you can't even instantiate an instance of the jQuery object in your code. The same logic applies to all other frameworks in all other languages.
    Don't like me? Click it.

    Scripting problems? Windows questions? Ask the Windows Guru!

    Stay up to date with all of my latest content. Follow me on Twitter!

    Help us help you! Post your exact error message with these easy tips!
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,288
    Rep Power
    189
    Originally Posted by Nilpo
    I could not agree with web_loone's reputation comment any more. Using a library is a not a solution to a problem. Learning the fundamentals of what you want to do is. Once you have a handle on that, libraries can make it quicker and easier moving forward.

    I'm tired of seeing thousands of questions across the internet asking for help to a problem in jQuery because they do not know JavaScript. Since jQuery IS JavaScript, it makes no sense to try and use it without learning JavaScript first. In fact, it's impossible. Without JavaScript, you can't even instantiate an instance of the jQuery object in your code. The same logic applies to all other frameworks in all other languages.
    I did not say anything about a library; I mentioned using media queries, which is not a library; it is a modern native technique for displaying different styles, based on different screen resolutions. As, I agree with you; that a person should learn the basics, before using libraries. Please read my post a little closer next time, before disagreeing with me. I think you are referring to F5buddy post, which I have already disagreed with this OP, in the past, for suggesting a library; instead of learning actual W3C technics.

    Originally Posted by web_loone08
    The most modern technique for what your wanting to do is called "media queries". Do an online search for this and you should get several examples and/or ideas on how to make your site multi-resolution friendly.
    And... I commonly suggest using pure JavaScript, but occasionally I do suggest using the jQuery library; as I usually assume someone posting here, has a basic understanding of JavaScript, unless they state otherwise or unless jQuery has a method, that I think; is simpler to compose and/or execute, then native JavaScript.

    Comments on this post

    • Strider64 agrees
    Last edited by web_loone08; January 13th, 2015 at 05:58 PM.
  12. #7
  13. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,309
    Rep Power
    1501
    I was agreeing with you that Bootstrap was not a valid answer. I was using jQuery as a further example of how people are pushing libraries and frameworks as a solution without taking the time to understand exactly why they work first.
    Don't like me? Click it.

    Scripting problems? Windows questions? Ask the Windows Guru!

    Stay up to date with all of my latest content. Follow me on Twitter!

    Help us help you! Post your exact error message with these easy tips!
  14. #8
  15. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,288
    Rep Power
    189
    Originally Posted by Nilpo
    I was agreeing with you that Bootstrap was not a valid answer. I was using jQuery as a further example of how people are pushing libraries and frameworks as a solution without taking the time to understand exactly why they work first.
    Ok, maybe you worded your post wrong.

    Originally Posted by Nilpo
    I could not agree with web_loone's reputation comment any more.
    I think you meant to say F5buddy, as this OP was suggesting using Bootstrap for this situation. No worries, it seems we both agree on this point of matter.
  16. #9
  17. Plays with fire
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2003
    Location
    Barsoom
    Posts
    1,146
    Rep Power
    144
    I think the important thing to remember when dealing with a fluid layout and media queries is knowing there are many different resolutions and aspect ratios out there. So as you design the site, ask yourself how it will look if you scale the screen differently.

    I design for the large screen first, against some thinking out there, then ask myself how the site would look if it needed to fit a screen 100px smaller. Can I scale the content to fit or do I need to stack items differently?

    Also, if you need this to work with mobile devices, try to optimize the site as much as possible. Mobile data plans are slow and expensive, so be sure to serve smaller images to them. There's no need to send a 1920px image to a phone with a 400px screen.
    “Be ashamed to die until you have won some victory for humanity.” -- Horace Mann

    "...all men are created equal." -- US Declaration of Independence
  18. #10
  19. Devshed Beginner (1000 - 1499 posts)

    Join Date
    Jan 2004
    Location
    New Springfield, OH
    Posts
    1,309
    Rep Power
    1501
    I use a hybrid system. I believe that the "mobile first" approach is very important. It helps to keep your site simple, usable, and well performing. However, it's by far harder to design to larger sites. So my approach is to sketch my site on three sizes (mobile, tablet, desktop) so that I know what I'm building. Sometimes I do this in my head, but it's the same effect as wireframing.

    Then you build your mobile model first. Next you add media queries and perhaps conditionally loaded scripts to create your tablet version. Then you do the same for the desktop version. This way, you have all of the benefits of a mobile first approach, but you can still see very clearly where you are going at each design phase.

    Comments on this post

    • Strider64 agrees
    Don't like me? Click it.

    Scripting problems? Windows questions? Ask the Windows Guru!

    Stay up to date with all of my latest content. Follow me on Twitter!

    Help us help you! Post your exact error message with these easy tips!
  20. #11
  21. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2012
    Location
    Burb of Detroit, Michigan
    Posts
    107
    Rep Power
    96
    I just started designing for mobile first that way I don't worry about media queries at first. I create a fluid html/css that looks good small. Then when I go to bigger screens I add the appropriate media queries to make those screen sizes look good. Not only is it easier. I find it saves on the amount of CSS that I to write. I just keep reminding myself "Design for Mobile first". I know it's tempting to design for a large screen, because it's sitting right there in front of you, but in my opinion you can save yourself a lot of headaches designing for mobile first.

    Comments on this post

    • Nilpo agrees

IMN logo majestic logo threadwatch logo seochat tools logo