CODEWITHSUNDEEP
htmlcssresolution
georgepanos19
georgepanos19

Reputation: 11

CSS/HTML fit any resolution

I am relatively new to the css/html world. I am trying to create a website. I noticed though that even though everything looks great on my screen when i try to view it on lower resolution screens everything is messed up. Is there a way to make it display correctly through css?

Here is an image of what i'm trying to achieve and make it possible for lower resolutions as well: image here is my css so far (the first part is a reseter. i got it as it is from watching a youtube tutorial) :

html,body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}


/* change colours to suit your needs */

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}


/* change colours to suit your needs */

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title],
dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/* change border colour to suit your needs */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input,
select {
  vertical-align: middle;
}


/*!!!!!END OF RESET!!!!!*/


/*MY CSS*/

body {
  width: 100%;
  height: 100%;
}

#logo1 {
  padding-left: 25px;
}

#logo2 {
  padding-left: 260px;
}

#eternal {
  padding-top: 15px;
  display: block;
  position: absolute;
  left: 0;
}

#prwtoetis {
  padding-top: 20px;
  float: right;
  position: absolute;
  bottom: 0%;
  left: 0;
}

#akyri {
  padding-top: 5px;
  display: block;
  position: absolute;
  right: 0%;
}

#akyri2 {
  padding-top: 5px;
  display: block;
  bottom: 0%;
  right: 0%;
  position: absolute;
}

#quote {
  text-align: center;
  padding: 13%;
  font-family: Calibri;
  font-size: 35px;
}

a {
  color: #000;
  text-decoration: none;
}

body {
  background-color: #e1e8ea;
  width: 100%;
  min-width: 600px;
  max-width: 2000px
}

header {
  background-color: #b5c4c9;
  padding-top: 8px;
  padding-bottom: 10px;
  width: 100%;
  height: 159px;
}

header img {
  float: left;
}

nav {
  float: left;
}

nav ul {
  margin-top: 86px;
  margin-left: 200px;
}

nav ul li {
  display: inline-block;
  margin-left: 20px;
}

nav ul li a {
  font-family: Calibri;
  font-size: 22px;
}

a.ex5:hover,
a.ex5:active {
  text-decoration: underline;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>RateYourProfessor</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
  <div id="site-wrapper">

    <header>
      <div>
        <img id="logo1" src="images/logo.png">
        <nav>
          <ul>
            <li><a class="ex5" href="index.php">HOME</a></li>
            <li><a class="ex5" href="create.php">CREATE PROFESSOR</a></li>
            <li><a class="ex5" href="rate.php">RATE PROFESSOR</a></li>
            <li><a class="ex5" href="scoreboard.php">SCOREBOARD</a></li>
            <li><a class="ex5" href="top5.php">TOP 5</a></li>
          </ul>
        </nav>
        <img id="logo2" src="images/logo.png">
      </div>
    </header>

    <section>
      <div>
        <img id="eternal" src="images/eternal.png">
        <img id="prwtoetis" src="images/prwtoetis.png">
        <img id="akyri" src="images/akyri.png">
        <img id="akyri2" src="images/akyri2.png">
      </div>
      <div id="quote"><br> There is no end to education. <br>It is not that you read a book, pass an examination, and finish with education. <br>The whole of life, from the moment you are born to the moment you die, is a process of learning.
        <br>- <i>Jiddu Krishnamurti</i>
      </div>
    </section>
  </div>

</body>

</html>

Upvotes: 0

Views: 820

Answers (2)

Gavin Kemp
Gavin Kemp

Reputation: 509

If what you are referring to as "lower resolutions" meaning different screen sizes i.e. mobile, tablet, desktop, or even a smaller window size on the same desktop, then your solution lies with CSS media queries. You appear to have got to grips with the basics of HTML and CSS.

Your next step with CSS should be learning about media queries to shuffle/move content of the page depending on the screen size/resolution.

Bootstrap is great for handling this for you, but if you're new to HTML/CSS you should learn about the code that Bootstrap is built on before using it. Depending on the skill level you want to achieve of course.

W3Schools is excellent for beginners getting to grips with key concepts. Check out their section on media queries:

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

OR

another great resource is CSS-Tricks. Check out their article:

https://css-tricks.com/css-media-queries/

Last but not least, make sure to include the meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

This will render the content of the screen at the device screen width and sets the zoom level of the content of the page upon loading. Your won't notice too much different by just throwing in the meta tag above. You need to create some CSS Media Queries first to see the full advantage of this meta tag.

Good luck and have fun!

Upvotes: 1

lhavCoder
lhavCoder

Reputation: 961

Hi its always a good idea to build your application responsive using a framework such as bootstrap. That'll help your application great on all types of screens.

you can learn it from this website.

https://www.w3schools.com/bootstrap/

https://www.youtube.com/watch?v=qIULMnbH2-o

http://getbootstrap.com/getting-started/

If you dont use any framework like this one, making responsive websites will be a tedious task. Bootstrap is easy to learn and will save you lots of time.

If you decide not to use a framework like bootstrap you'll have to use media queries to resize your elements according to the screen size.

https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Upvotes: 0

Related Questions