CSS issue with different resolutions - Photoshop

BenjaminEdwards
August 15, 2014
209 views
2 votes
3 Answers

I’m creating a basic contact page for my website. I’m struggling to get it looking good in varying resolutions.

My laptop is 1368×766 and my monitor is 1920×1080.

The elements that set to absolute are moving around, the top image isn’t moving…all other elements are moving… I’m so confused:

CSS:

 body {
  text-align: center;
  background: url("http://i.imgur.com/JN0YSkP.png");
  background-repeat: repeat;
  background-position: center;
  color: white;
  font-family: 'Roboto', sans-serif;
  padding-top: 20px;
  padding-bottom: 0px;
}

p {
position: absolute;
top: 225px; 
right: 410px; 
font-size: 32px;
}
p2 {
position: absolute;
top: 420px;
right: 974px;
font-size: 28px;
}

p3 {
position: absolute;
top: 420px;
right: 570px;
font-size: 28px;
}

p4 {
position: absolute;
top: 420px;
right: 142px;
font-size: 28px;
}

.LI
{
display: inline-block;
position: absolute;
z-index : 2;
top: 510px; 
right:1050px; 
}

.CV
{
display: inline-block;
position: absolute;
z-index : 2;
top: 490px; 
right: 620px; 
}

.mail
{
display: inline-block;
position: absolute;
z-index : 2;
top: 510px; 
right: 196px; 
}

.Divider
{ 
position: absolute; 
z-index: 1; 
top: 380px; 
right: 28px; 
padding-bottom: 20px
}

html { -webkit-font-smoothing: antialiased; }

HTML:

<!DOCTYPE html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
    <title>Benjamin Edwards | Web Designer | West Sussex</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="Benjamin Edwards is a Web Designer and IT Project Manager from West Sussex. Say hello!">
    <meta name="keywords" content="benjamin, edwards, IT, project, manager, photoshop, web, designer, worthing, west sussex">
    <meta name="robots" content="INDEX,FOLLOW">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

    <img src="http://i.imgur.com/6gBN3LF.png">
    <p>Hi! I’m Benjamin, a Worthing based</br>Web Designer and IT Project Manager.</p>
    <p2>Connect on LinkedIN:</p2>
    <div class="LI">
        <a href="https://www.linkedin.com/in/benjaminedwards86">
        <img src="http://i.imgur.com/KEqGBV3.png">
        </a>
    </div>

    <p3>Download my CV:</p3>
    <div class="CV">
        <a href="https://www.dropbox.com/s/9jtsjxpb9xqdpdw/Benjamin%20Edwards%20-%20CV.docx?dl=1" download="benjamin-edwards-CV.doc">
        <img src="http://i.imgur.com/ce0Zzgi.png">
        </a>
    </div>

    <p4>Send me an email:</p4>
    <div class="mail">
        <a href="mailto:[email protected]">
        <img src="http://i.imgur.com/KQV7Eip.png">
        </a>
    </div>

    <div class="Divider">
        <img src="http://i.imgur.com/B4TiKRT.png">
    </div>

</body>

JSFiddle

Tags: css html

Answers

- FlyingAura
- August 15, 2014 at 2:11 pm
- 0 votes
0
Its always wise to make a fiddle about the problem you are having.
Coming to the issue about elements moving around, Its because you have absolutely placed ALL the elements and hard coded the values. Like:
```
p {
position: absolute;
top: 225px; 
right: 410px; 
font-size: 32px;
}
```
Since at different browser sizes, the resolution changes and so does the placement of the divs, your elements are moving awry ( Since you have absolutely positioned them only to ONE browser dimension.

So what you should do:
First, you should make sure you understand when should a div be absolute and when should it be relative.

I’ll give a thumb rule: If you want to position an element with respect to a div. Make it position absolute and its parent, position: relative.

You could make your website responsive using Bootstrap. But you could also give measurements in % and prevent distortions.

If I am to do one:
```
p3 {
position: absolute;
top: 20%;
right: 30%;
font-size: 1.1em;
}
```
If you dont exactly know whats happening, you should spend time studying %, em measurements etc.

If you can create a fiddle and show your code, We can help you fix it.
Login or Signup to reply.

- KrupalShah
- August 15, 2014 at 2:15 pm
- 0 votes
0
You can use CSS media queries for this.

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone screen vs. computer screen).

With media queries, we’ll take this to a new level. Rather than looking at what device it is, we will look at what capabilities the device has. More specifically, we will look at the following:
1. height and width of the device height and width of the browser
2. screen resolution orientation of the device (for mobile phones and
  
  tablets; portrait or landscape)
CSS2 allows you to specify stylesheet for specific media type such as screen or print.
Now CSS3 makes it even more efficient by adding media queries.

You can add expressions to media type to check for certain conditions and apply different stylesheets. For example, you can have one stylesheet for large displays and a different stylesheet specifically for mobile devices.

It is quite powerful because it allows you to tailor to different resolutions and devices without changing the content.

Example:

The following CSS will apply if the viewing area is smaller than 600px.
```
@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}
```
If you want to link to a separate stylesheet, put the following line of code in between the <head> tag.
```
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
```
Multiple Media Queries:

You can combine multiple media queries. The following code will apply if the viewing area is between 600px and 900px.
```
@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}
```
Device Width:

The following code will apply if the max-device-width is 480px (eg. iPhone display). Note: max-device-width means the actual resolution of the device and max-width means the viewing area resolution.
```
@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}
```
Login or Signup to reply.

As exmaple how simple it can be for you, i created a jsfiddle:
JSFiddle

HTML

<img src="http://i.imgur.com/6gBN3LF.png">
<p>Hi! I’m Benjamin, a Worthing based</br>Web Designer and IT Project Manager.</p>
  <ul>
   <li><h1>Connect on LinkedIN:</h1>
    <a href="https://www.linkedin.com/in/benjaminedwards86">
     <img src="http://i.imgur.com/KEqGBV3.png">
    </a>
   </li>
   <li><h1>Download my CV:</h1>
    <a href="https://www.dropbox.com/s/9jtsjxpb9xqdpdw/Benjamin%20Edwards%20-%20CV.docx?dl=1" download="benjamin-edwards-CV.doc">
     <img src="http://i.imgur.com/ce0Zzgi.png">
     </a>
    </li>
    <li><h1>Send me an email:</h1>
     <a href="mailto:[email protected]">
      <img src="http://i.imgur.com/KQV7Eip.png">
     </a>
    </li>
   </ul>

CSS

body {
  text-align: center;
  background: url("http://i.imgur.com/JN0YSkP.png");
  background-repeat: repeat;
  background-position: center;
  color: white;
  font-family: 'Roboto', sans-serif;
    min-width: 900px;
}
img {
    margin: auto 20px;
}

ul {
   height: 275px;
    width: 80%;
    margin: 10% auto;
    border: 3px solid #31C2A9;
    min-width: 900px;
}
ul li {
    float: left;
    width: 33%;
    border-right: 1px solid #31C2A9;
    list-style-type: none;
    height: 275px;
    min-width: 275px;
}
ul li:last-child {
    border-right: none;
}

You get rid of all the css selectors and simplify your code 🙂
And there is no single position absolute 😉

Please signup or login to give your own answer.

Click here to cancel reply.

CSS issue with different resolutions – Photoshop

Answers