One of the major problems I have when designing websites are the variety of screen resolutions. First, I design on my 1366 x 768 computer and it looks perfect! Then on a 27" Mac it has so much space that the height could use in the content. It's like as the screen resolution is smaller, you have to worry about the width, and as it gets larger, the height. So, my question is what is the underlying factor to solving screen resolutions and space? I've heard percentages, separate media style sheets, and responsive will do the deal, but are those really a problem solver? Does it cause any other design conflicts?
I think the changes need to be made in the following places although I'm not sure:
section > div{
font-weight:bold;
font-size:30px;
color:#000000;
display:inline; /*fixed size based only what is in the element*/
width:30%; /*restrict the width size, default with inline property is 100%*/
/*max-height:85%;*/ /*restrict height size*/
padding:5px; /*a little pad from the edges are good*/
margin-top:10px; /*align the same as the other elements*/
margin-bottom:100px;
margin-left:100px;
margin-right:100px;
}
#message{ /*move element freely inside section; placed where desired*/
position: absolute;
top:120px;
left:-75px;
right:100px;
min-height:310px; /*same height across all content pages*/
min-width:550px; /*same width across all content pages*/
font-size:20px;
}
Just in case, my full css code in jsfiddle: JS Fiddle
I want to reach most target audiences with my website and right now, it's only good for 1024 x 768 and some tablets but definitely not mobile devices or large computer screens.
My website: Website Project on SmartPhone Photography
You see how the content aligns with the background image. The camera is to the right and the content to the left, not touching or closing in on the camera part of the background as does on mobile devices. Another thing, is on large computer screens, there's too much space on the top and bottom of the content, it's like as if it's in the middle with fixed height. As the screen's height grows larger I want the content to have a lesser vertical scroll button and fill the space needed as it looks on a 1024 x 768.
I would really appreciate an answer to this problem and something to be used for future reference on how to solve screen resolutions across all media. This website is fantastic for testing multiple screen resolutions. ViewLike.US
Sounds like you should go responsive. Then you can adjust for your viewport. Use a media query or if use an option like Bootstrap . Here's a media query example:
/***************
TABLET */
@media (min-width: 768px) {
body{
/*Put all your secific styles here*/
}
}
/***************
DESKTOP NORMAL*/
@media (min-width: 992px) {
body{
/*Put all your secific styles here*/
}
Unfortunately it is not as easy as writing one line and fixes all independently.
NOTE: If responive, use em's for Fonts, % for widths. Doesn't mean you shouldn't use pixels, remember the query is specific so for 992px Desktop, you could put width:20px; or whatever.
Hope this helps.