CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
Austin Whitewood
Austin Whitewood

Reputation: 11

Inexperienced with CSS editing for different screen sizes?

I am having a problem with HTML and CSS regarding screen size. I know how to code in both languages, but I end up having the same problem with screen adaptation. I finished coding a website on a mac (27 inch screen), and it looks enormous on other small screen sizes.

What is it that I do wrong for it to not work on other screens, adapting correctly and adequately to the CSS configuration?

I don´t know if code is needed for this question, if it is I will upload it immediately.

Thank you very much.

Upvotes: 1

Views: 320

Answers (5)

Ishan Jain
Ishan Jain

Reputation: 8171

Media Queries is best options to get responsive web layout using CSS.

Media Queries: CSS media queries allow you to apply changes to your site’s design based on the viewing size and capability of the device on which your content is displayed. This is an extremely powerful tool for creating responsive designs, and it has garnered support across all major mobile browsers (including Safari, Chromium, Opera, and even the forthcoming Internet Explorer Mobile [Windows Phone 7]).

Here’s a simple example of using a media query in your design’s style sheet:

#wrapper {
  width: 80%;
  margin: auto;
  max-width: 1200px;
  min-width: 800px;
}
@media screen and (max-width: 800px) {
  #wrapper {
    width: 90%;
    min-width: 0;
  }
}

Click here to learn: How to use media-query

List of Media Queries for Standard Devices

Upvotes: 0

Wilson
Wilson

Reputation: 608

You will need to learn about liquid design or responsive design based on what your goal is.

This link can help you to know more about liquid design: http://www.sitepoint.com/liquid-design/

and this about responsive design: http://en.wikipedia.org/wiki/Responsive_web_design

This other link is an stackoverflow question talk about similar case that you can take a look: How to deal with different screen resolutions in CSS?

Upvotes: 1

Kapil Dave
Kapil Dave

Reputation: 126

Basic solution is Bootstrap.Go and grab it no worries about any design issue and screen issues it will do all for you.

Their are many css, components, javascript built-in in bootstrap.

Just download bootsrap package and Enjoy.............

Upvotes: 0

Dehan Wjiesekara
Dehan Wjiesekara

Reputation: 3182

user media queries to load separate styles in different screen sizes

ex:- 

@media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
   content: "Email: ";
   font-style: italic;
   color: #666;
  }
}

more details at css media queries and using available space

Upvotes: 0

user3155926
user3155926

Reputation: 1

i may be wrong but on codeacademy (where i started to code) they say that having zoomed in and out can change how it works (but that may only be because of how they compile) to reset your zoom ctrl + 0/ cmd + 0

Upvotes: 0

Related Questions