0

I have an Layout assignment and it needs to look like this: Layout Assignment

I have tried to do it and it so far it looks like this: my page part 1
My page part 2

I have trouble adjusting the logo like it is asked on the assignment and the and the fourth div when you count from the right is not stretching for 2 divs.

The second part of the assignment looks needs to look like this:

Layout assignment part 2

I don't know how to do it and how to resize it to the specific adjustments that the assignment asks for.

Here is my html and css:

.header {
  display: grid;
  border: crimson 3px solid;
  grid-row-gap: 1em;
  height: auto;
}

.fantasy {
  margin-left: 400px;
}

.content {
  display: grid;
  grid-template-columns: 70% 30%;
  /*
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  */
  grid-gap: 1em;
}

.content>div {
  background: #eee;
}

.content>div:nth-child(odd) {
  background: #ddd;
}

.footer {
  background-color: cadetblue;
  width: 100%;
}

.fotografi {
  width: 100%;
  height: auto;
}

.logo {
  width: 10%;
  height: auto;
}
<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="styles.css" />
</head>

<body>

  <div class="header">
    <img class="logo" src="foto/logo.jpeg">
    <h2 class="fantasy">Fantasy Wallpapers</h2>
  </div>

  <br/>

  <div class="content">
    <div>
      <img class="fotografi" src="foto/mountaingate.jpg">
    </div>
    <div>
      World War II or the Second World War, often abbreviated as WWII or WW2, was a global war that lasted from 1939 to 1945. It involved the vast majority of the world's countries—including all of the great powers—forming two opposing military alliances: the
      Allies and the Axis powers. In a total war directly involving more than 100 million personnel from more than 30 countries, the major participants threw their entire economic, industrial, and scientific capabilities behind the war effort, blurring
      the distinction between civilian and military resources.
    </div>
    <div>
      World War II or the Second World War, often abbreviated as WWII or WW2, was a global war that lasted from 1939 to 1945. It involved the vast majority of the world's countries—including all of the great powers—forming two opposing military alliances: the
      Allies and the Axis powers. In a total war directly involving more than 100 million personnel from more than 30 countries, the major participants threw their entire economic, industrial, and scientific capabilities behind the war effort, blurring
      the distinction between civilian and military resources.
    </div>
    <div>
      World War II or the Second World War, often abbreviated as WWII or WW2, was a global war that lasted from 1939 to 1945. It involved the vast majority of the world's countries—including all of the great powers—forming two opposing military alliances: the
      Allies and the Axis powers. In a total war directly involving more than 100 million personnel from more than 30 countries, the major participants threw their entire economic, industrial, and scientific capabilities behind the war effort, blurring
      the distinction between civilian and military resources.
    </div>
    <div class="divcolumn">
      World War II or the Second World War, often abbreviated as WWII or WW2, was a global war that lasted from 1939 to 1945. It involved the vast majority of the world's countries—including all of the great powers—forming two opposing military alliances: the
      Allies and the Axis powers. In a total war directly involving more than 100 million personnel from more than 30 countries, the major participants threw their entire economic, industrial, and scientific capabilities behind the war effort, blurring
      the distinction between civilian and military resources.
    </div>
  </div>

  <div class="footer">
    <h3>Fantasy Wallpaper</h3>
  </div>
</body>

</html>

I have learned a lot from this assignment and I hope if someone can give me the solution to the it would give me enough knowledge to advance further.

Fabian S.
  • 2,441
  • 2
  • 24
  • 34
  • 3
    Does this answer your question? [Media Queries: How to target desktop, tablet, and mobile?](https://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) – Fabian S. Oct 18 '21 at 15:21

1 Answers1

0

For resizing for smaller screens I would suggest to use Media Queries, it looks like this:

@media only screen and (max-width: 760px) {
  h1 {
    ...
  }
  p {
    ..
  }
}

Furthermore you can work with relative sizes:

  • em Relative to the font-size of the element (2em means 2 times the size of the current font)
  • ex Relative to the x-height of the current font (rarely used)
  • ch Relative to the width of the "0" (zero)
  • rem Relative to font-size of the root element
  • vw Relative to 1% of the width of the viewport*
  • vh Relative to 1% of the height of the viewport*
  • vmin Relative to 1% of viewport's* smaller dimension
  • vmax Relative to 1% of viewport's* larger dimension
  • % Relative to the parent element

For the specific positioning of one item I would use, for example like this:

{
position:absolute; 
bottom:0; 
left:0;
}

https://developer.mozilla.org/de/docs/Web/CSS/position

you can also play with:

padding margin left right top bottom

wrapper678
  • 16
  • 2