Kevin Powell - Community•12mo ago

Hello!

I have some weird issues with padding's and margin's. I have this mysterious left margin that i have no idea where its coming from, or maybe my whole approach to this is bad. I have no idea since i'm relatively new.

3 Replies

EnnyMeeny•12mo ago

ill send the code in a moment

<!DOCTYPE html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link rel="icon" type="image/x-icon" href="logo-light.png" />
    <title>Školní noviny ZŠ Poláčkova</title>
    <script defer src="main.js"></script>
  </head>
  <body>
    <section class="main-section">
      <div class="maincontent">
        <p>Školní noviny ZŠ Poláčkova</p>
      </div>
      <a href="#články" class="bottom-text hidden">Sjeďte dolů pro více</a>
    </section>

    <section id="články" class="articles">
      <h1 class="articlesTitle">Články</h1>
      <div class="card">
        <div class="image">
          <img class="imageImage" src="uspech-ve-sportovni-soutezi/bg.jpg" />
        </div>
        <div class="text">
          <h1 class="cardTitle">Úspěch ve sportovní soutěži</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elitar. Dolorem
            quisquam nihil odio quasi, molestias reprehenderit incidunt ratione
            accusamus est atque, quibusdam culpa in iste minima totamin nisi.
          </p>
          <!--Max lenght: 200 characters-->
          <a
            class="readButtonWrapper"
            href="uspech-ve-sportovni-soutezi/index.html"
          >
            <button class="readButton">Číst</button>
          </a>
        </div>
      </div>
    </section>
  </body>
</html>

<!DOCTYPE html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link rel="icon" type="image/x-icon" href="logo-light.png" />
    <title>Školní noviny ZŠ Poláčkova</title>
    <script defer src="main.js"></script>
  </head>
  <body>
    <section class="main-section">
      <div class="maincontent">
        <p>Školní noviny ZŠ Poláčkova</p>
      </div>
      <a href="#články" class="bottom-text hidden">Sjeďte dolů pro více</a>
    </section>

    <section id="články" class="articles">
      <h1 class="articlesTitle">Články</h1>
      <div class="card">
        <div class="image">
          <img class="imageImage" src="uspech-ve-sportovni-soutezi/bg.jpg" />
        </div>
        <div class="text">
          <h1 class="cardTitle">Úspěch ve sportovní soutěži</h1>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elitar. Dolorem
            quisquam nihil odio quasi, molestias reprehenderit incidunt ratione
            accusamus est atque, quibusdam culpa in iste minima totamin nisi.
          </p>
          <!--Max lenght: 200 characters-->
          <a
            class="readButtonWrapper"
            href="uspech-ve-sportovni-soutezi/index.html"
          >
            <button class="readButton">Číst</button>
          </a>
        </div>
      </div>
    </section>
  </body>
</html>

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

body {
  font-family: "Poppins", sans-serif;
  justify-content: center;
  height: 100vh;
  color: #fff;
  background-color: #202020;
}

html, body {
    margin: 0px; padding: 0px
}

html {
  scroll-behavior: smooth;
}

a {
  color: #fff;
  cursor: pointer;
}

h1 {
  font-size: 64px;
}

button {
  all: unset;
}

button:focus {
  outline: revert;
}

.bottom-text {
  font-size: 32px;
}

.main-section {
  font-weight: 600;
  margin: auto;
  font-size: 10vmin;
  height: 100svh;
  width: 100%;
  text-align: center;
}

.maincontent {
  height: 75svh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hidden {
  opacity: 0;
  transition: all 1s;
  transform: translateY(-100%);
}

.show {
  opacity: 1;
  transform: translateY(0);
}

.readButton {
  font-size: 16px;
  padding: 16px;
  border-radius: 32px;
  color: #181818;
  background-color: #fff;
  transition: 350ms;
  min-width: 64px;
  text-align: center;
}
.readButton:hover {
  color: #fff;
  background-color: #181818;
  cursor: pointer;
}
.readButtonWrapper{
  text-decoration: none;
}

.articles {
  width: calc(100%-64px);
  min-height: 100svh;
  padding: 32px;
}

.articlesTitle {
  text-align: center;
}

.card {
  margin-block: 32px;
  width: 100%;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  grid-template-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0px 0em;
  grid-auto-flow: row;
  grid-template-areas: "image text";
}

.imageImage{
  border-radius: 32px;
  max-width: 100%;
  max-height: 250px;
  vertical-align: auto;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

.image {
  margin: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-area: image;
}

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

body {
  font-family: "Poppins", sans-serif;
  justify-content: center;
  height: 100vh;
  color: #fff;
  background-color: #202020;
}

html, body {
    margin: 0px; padding: 0px
}

html {
  scroll-behavior: smooth;
}

a {
  color: #fff;
  cursor: pointer;
}

h1 {
  font-size: 64px;
}

button {
  all: unset;
}

button:focus {
  outline: revert;
}

.bottom-text {
  font-size: 32px;
}

.main-section {
  font-weight: 600;
  margin: auto;
  font-size: 10vmin;
  height: 100svh;
  width: 100%;
  text-align: center;
}

.maincontent {
  height: 75svh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hidden {
  opacity: 0;
  transition: all 1s;
  transform: translateY(-100%);
}

.show {
  opacity: 1;
  transform: translateY(0);
}

.readButton {
  font-size: 16px;
  padding: 16px;
  border-radius: 32px;
  color: #181818;
  background-color: #fff;
  transition: 350ms;
  min-width: 64px;
  text-align: center;
}
.readButton:hover {
  color: #fff;
  background-color: #181818;
  cursor: pointer;
}
.readButtonWrapper{
  text-decoration: none;
}

.articles {
  width: calc(100%-64px);
  min-height: 100svh;
  padding: 32px;
}

.articlesTitle {
  text-align: center;
}

.card {
  margin-block: 32px;
  width: 100%;
  height: 300px;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  grid-template-rows: 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 0px 0em;
  grid-auto-flow: row;
  grid-template-areas: "image text";
}

.imageImage{
  border-radius: 32px;
  max-width: 100%;
  max-height: 250px;
  vertical-align: auto;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

.image {
  margin: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  grid-area: image;
}

First part of the css code

.text {
  grid-area: text;
  padding: 16px;
  margin: 0px;
}
.cardTitle{
  font-size: 48px;
}

@media (prefers-reduced-motion) {
  .hidden {
    transition: none;
  }
}

@media screen and (max-width: 1200px) {

  .card {
    padding: 16px;
    display: block;
    height: 600px;
    width: 100%;
  }
  .articles {
    padding: 0px;
  }
  .image {
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .imageImage{
    max-width: 500px;
    width: 100%;
  }
  h1 {
    font-size: 48px;
  }
  .cardTitle{
    font-size: 24px;
  }
  .main-section {
    font-size: 48px;
  }
  .bottom-text {
    font-size: 16px;
  }
  .maincontent {
    height: 80svh;
  }
}

@media screen and (max-width: 600px) {
  h1 {
    font-size: 48px;
  }

.text {
  grid-area: text;
  padding: 16px;
  margin: 0px;
}
.cardTitle{
  font-size: 48px;
}

@media (prefers-reduced-motion) {
  .hidden {
    transition: none;
  }
}

@media screen and (max-width: 1200px) {

  .card {
    padding: 16px;
    display: block;
    height: 600px;
    width: 100%;
  }
  .articles {
    padding: 0px;
  }
  .image {
    margin: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .imageImage{
    max-width: 500px;
    width: 100%;
  }
  h1 {
    font-size: 48px;
  }
  .cardTitle{
    font-size: 24px;
  }
  .main-section {
    font-size: 48px;
  }
  .bottom-text {
    font-size: 16px;
  }
  .maincontent {
    height: 80svh;
  }
}

@media screen and (max-width: 600px) {
  h1 {
    font-size: 48px;
  }

Second part oh and by the way the mysterious margin is apearing only on small screens ok acctualy checked and fixed the problem and didnt even notice but its still not resizing properly : -( its still to wide even tho i set its width to 100% I think the cause is the image because it looks a bit elongated but im not sure how to fix that

MarkBoots•12mo ago

few things you can change immediatly. - set *, *::before, *::after { box-sizing: border-box } to make sure borders and paddings are included when you set a size - remove width: 100% from all block level elements (such as div), those are full widht by default - remove display: block from element that are already block by default - when you use calc() be sure your operators are surrounded by a space. Otherwise it will break. calc(100%-64px) does not work, calc(100% - 64px) does - on .card you are defining a lot of grid-properties. in this case you only need grid-template-columns and the areas and probably there are a few other things, but this is a start

EnnyMeeny•12mo ago

thanks

Gaming

Programming

Hello!