So, I have for a time been coding websites, but today I stumbled upon a problem with a page. On my previous designs it has worked with a lot of different sizes, but not with this one. Anyone know a way for me to get a more proper design, aligning it for also larger screens?
/* Linked with index.html */
/* All elements having a color:red in the same element as a rgba color, the color:red is only used for fallbacks for older/browsers not supporting rgba. */
@import url(http://fonts.googleapis.com/css?family=Titillium+Web);
html,
body {
background-color: #262626;
font-family: 'Titillium Web', sans-serif;
background-repeat: repeat-x;
width: auto;
min-width: 1000px;
}
.backtocv {
margin-left: 30px;
}
h1 {
margin-left: 15px;
margin-right: 15px;
}
h2 {
margin-left: 15px;
margin-right: 15px;
}
h3 {
margin-left: 15px;
margin-right: 15px;
}
p {
margin-left: 15px;
margin-right: 15px;
max-width: 750px;
width: auto;
height: auto;
}
.overlay {
background-color: rgb(0, 0, 0);
/* Fall-back for browsers not supporting RGBA */
background-color: rgba(0, 0, 0, 0.7);
border: 6px solid rgba(30, 30, 30, 0.8);
border: 6px solid rgb(30, 30, 30);
/* Fall-back for browsers not supporting RGBA */
-webkit-background-clip: padding-box;
background-clip: padding-box;
min-width: 515px;
width: auto;
}
.toptitle {
color: black;
background: -webkit-linear-gradient(#8F0000, #720000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
'
}
.toptitlename {
color: white;
}
.toptitlenameparent {
background-color: red;
background: -webkit-linear-gradient(#8F0000, #720000);
margin-top: -10px;
padding-left: 15px;
}
.toptitleparent {
background-color: white;
margin-top: -10px;
padding-left: 15px;
}
.swedishflag {
margin-left: 5px;
}
.ukflag {
width: auto;
height: auto;
max-width: 30px;
max-height: 30px;
margin-left: 10px;
}
.placeholder {
background: -webkit-linear-gradient(#8F0000, #720000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
'
}
.copyright {
font-size: 11px;
text-align: bottom;
color: white;
}
.normalhr {
margin-left: 0%;
width: 70%;
size: 1%;
}
.facebook {
width: auto;
height: auto;
max-width: 30px;
max-height: 30px;
margin-left: 30px;
}
.twitter {
width: auto;
height: auto;
max-width: 30px;
max-height: 30px;
margin-left: 7px;
}
.newslist {
text-decoration: none;
margin-left: 1017px;
list-style-type: none;
color: white;
width: auto;
max-width: 950px;
}
.externallist {
color: white;
text-decoration: none;
list-style-type: none;
width: auto;
max-width: 950px;
margin-left: 550px;
}
.leftpic {
display: block;
max-width: 300px;
max-height: 300px;
height: auto;
width: auto;
margin-left: 50px;
margin-top: -100px;
border: 1px solid white;
}
.newsheader {
color: red;
right: -1130px;
position: relative;
background: -webkit-linear-gradient(#8F0000, #720000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
'
}
a:link {
text-decoration: none;
color: white;
}
a:visited {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: none;
color: white;
}
a:active {
text-decoration: none;
color: white;
}
.externalheader {
color: red;
margin-top: -110px;
margin-left: 590px;
background: -webkit-linear-gradient(#8F0000, #720000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
'
}
.afterinfobar {
margin-top: -1px;
}
.abouttitle {
color: red;
background: -webkit-linear-gradient(#8F0000, #720000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
'
}
.aboutinfo {
color: white;
width: auto;
max-width: 750px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="indexstyle.css" rel="stylesheet" type="text/css">
<title>Johannes Sundqvist | Index</title>
</head>
<body>
<!-- Start of language switch and social bar -->
<a href="index.html">
<img class="ukflag" src="http://icons.iconarchive.com/icons/custom-icon-design/flag-3/256/United-Kingdom-flag-icon.png" alt="English (UK)">
</a>
<a href="indexsv.html">
<img class="swedishflag" src="http://www.eurovision.tv/img/upload/flags/medium/Sweden.png" alt="Swedish">
</a>
<a href="https://www.facebook.com/johannes.sundqvist.9">
<img class="facebook" src="http://international.olemiss.edu/wp-content/uploads/sites/23/2014/01/facebook-logo-transparent.png" alt="Facebook">
</a>
<a href="http://twitter.com/TheXariez">
<img class="twitter" src="https://g.twimg.com/Twitter_logo_blue.png" alt="Twitter">
</a>
<!-- End of language switch and social bar -->
<!-- Start of top header and body -->
<div class="toptitlenameparent">
<h2 class="toptitlename"> Johannes Sundqvist </h2>
</div>
<!-- Start of overlay -->
<div class="overlay">
<div id="rightnews">
<h1 class="newsheader"> News </h3>
<div class="frontpagelists">
<ul>
<li class="newslist"> Internet CV Created - View <a href="cv.html"><span style="color:#8F0000">here</span></a> (clickable) </li>
</ul>
<h1 class="externalheader"> External Links </h1>
<ul>
<li class="externallist"><a href="cv.html">Internet CV (Curriculum Vitae) (clickable)</a>
</li>
<li class="externallist"><a href="http://jsundqvist.optipoint.fi/blog/">IT Blog (Swedish only, clickable)</a>
</li>
</ul>
</div>
</div>
<img class="leftpic" src="https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10406823_10201587226402089_720379364643065326_n.jpg?oh=6110f5e2e100a383cb32745fc5aa492c&oe=55599AE6&__gda__=1432453081_e9db450a88b424d8d5d5287e19868609">
<hr class="afterinfobar">
<h3 class="abouttitle"> About this site </h3>
<p class="aboutinfo">This site was created using HTML and CSS, it is a site mainly created for a school task we got, but a very large part of it was also created just to pure enjoyment from me as the author. For you asking, Yes, That is me on the picture. But no, I will
not be giving you my phone number for any weird reason.</p>
<br>
<hr>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- Copyright -->
<p class="copyright">Copyright © Johannes Sundqvist | 2015</p>
<!-- End of overlay and body -->
</div>
</body>
</html>http://getbootstrap.com/ is your best option. bootstrap has the best predefined css classes that will optimize divs text images to work on both pc and mobile. they have great documentations and examples to show you how it works.