Kevin Powell - Community•13mo ago

A simple responsible layout

Hello! I am making this little website and i need to have like an "info" section about the company's products. I was able to make it work on a computer (wide screen - 1000px and more) but not on narrower screens. Something like in the image. Btw the images should be something about 16:9 but its not limited to it, just so they are not smaller than 3:2. Could someone please help me. Thanks! 🙌

20 Replies

Bardacoon•13mo ago

Can you send your code so far?

★ stargirl ★OP•13mo ago

sure just wait a sec please

  <div class="section2">
    <div class="picture1"><img class="Notoriety-Thumb" src="Notoriety.png"
        alt="Three masked men are shooting at police officers. The three masked men are probably robbing a bank in which this photo was taken.">
    </div>
    <div class="text">
      <h1 class="Notoriety-title">Notoriety</h4>
        <p class="Notoriety-text">Notoriety was a co-op FPS game on Roblox, where you and friends planned daring heists
          with missions, weapons, gadgets, and disguises. It was created by Brick_man. It was previously named Payday 2, and
          had 227.3 million visits, 1,330,000 favorites, and a 91% approval rating.
        </p>
    </div>
  </div>

  <div class="section2">
    <div class="picture1"><img class="Notoriety-Thumb" src="Notoriety.png"
        alt="Three masked men are shooting at police officers. The three masked men are probably robbing a bank in which this photo was taken.">
    </div>
    <div class="text">
      <h1 class="Notoriety-title">Notoriety</h4>
        <p class="Notoriety-text">Notoriety was a co-op FPS game on Roblox, where you and friends planned daring heists
          with missions, weapons, gadgets, and disguises. It was created by Brick_man. It was previously named Payday 2, and
          had 227.3 million visits, 1,330,000 favorites, and a 91% approval rating.
        </p>
    </div>
  </div>

Html

@media screen and (max-width: 1000px) {
  .section2 {
    width: 100svw;
    height: 100svh;
  }

  .picture1 {
    display: flex;
  justify-content: center;
    align-items: center;
    display: none;
    margin: 0px;
    width: 100svw;
  }
  .Notoriety-Thumb{
    width: 100svw;
    height: 100%;
  }

  .text {
    width: 100%;
    display: none;
    margin: 0px;
  }
}

.section2 {
  width: 100svw;
  height: 100svh;
}

.picture1 {
  display: inline-block;
  width: 48%;
}

.text {
  display: inline-block;
  width: 48%;
  margin: 16px;
}

.Notoriety-text {
  font-size: 24px;
}
.Notoriety-title {
  font-size: 5svw;
}

.Notoriety-Thumb {
  margin: 32px;
  width: 100%;
  height: 50svh;
  max-width: fit-content;
  max-height: fit-content;
  object-fit: cover;
  border-radius: 16px;
}

@media screen and (max-width: 1000px) {
  .section2 {
    width: 100svw;
    height: 100svh;
  }

  .picture1 {
    display: flex;
  justify-content: center;
    align-items: center;
    display: none;
    margin: 0px;
    width: 100svw;
  }
  .Notoriety-Thumb{
    width: 100svw;
    height: 100%;
  }

  .text {
    width: 100%;
    display: none;
    margin: 0px;
  }
}

.section2 {
  width: 100svw;
  height: 100svh;
}

.picture1 {
  display: inline-block;
  width: 48%;
}

.text {
  display: inline-block;
  width: 48%;
  margin: 16px;
}

.Notoriety-text {
  font-size: 24px;
}
.Notoriety-title {
  font-size: 5svw;
}

.Notoriety-Thumb {
  margin: 32px;
  width: 100%;
  height: 50svh;
  max-width: fit-content;
  max-height: fit-content;
  object-fit: cover;
  border-radius: 16px;
}

Css oh well

Bardacoon•13mo ago

when you send blocks of code you can wrap them with: type 3 of these: ` // your code then 3 of those again

★ stargirl ★OP•13mo ago

thanks

Bardacoon•13mo ago

excatly And if you want you can also add the language of your code after them so you have highlighting

★ stargirl ★OP•13mo ago

cool

Bardacoon•13mo ago

wait what's the problem, it's already responsive

★ stargirl ★OP•13mo ago

it looks like this for me

Bardacoon•13mo ago

★ stargirl ★OP•13mo ago

wait let me send the full code maybe its because of that

@font-face {
  font-family: Varela Round;
  src: url("VarelaRound-Regular.ttf");
}

::-moz-selection {
  /* Code for mozila based web browesers */
  background-color: #f7e7ce;
  color: #0f0f0f;
}

::selection {
  /* Code code for every other web browesers */
  background-color: #f7e7ce;
  color: #0f0f0f;
}

html {
  margin: 0px;
  padding: 0px;
  background-color: #0f0f0f;
  color: #f7e7ce;
  font-family: "Varela Round", sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.section1 {
  font-size: 8vw;
  height: 100svh;
  width: 100svw;
  text-align: center;
}

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

.logo1 {
  height: 8vw;
  margin: 1vmax;
}
.Notoriety-Title {
  margin: 48px;
  width: 100%;
  border-radius: 16px;
  max-width: 800px;
  display: block;
}

.smalltext {
  font-size: 16px;
}

.smalltext2 {
  font-size: 5px;
}

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

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

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

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

@media screen and (max-width: 1000px) {
  .section2 {
    width: 100svw;
    height: 100svh;
  }

  .picture1 {
    display: flex;
  justify-content: center;
    align-items: center;
    display: none;
    margin: 0px;
    width: 100svw;
  }
  .Notoriety-Thumb{
    width: 100svw;
    height: 100%;
  }

  .text {
    width: 100%;
    display: none;
    margin: 0px;
  }
}

.section2 {
  width: 100svw;
  height: 100svh;
}

.picture1 {
  display: inline-block;
  width: 48%;
}

.text {
  display: inline-block;
  width: 48%;
  margin: 16px;
}

.Notoriety-text {
  font-size: 24px;
}
.Notoriety-title {
  font-size: 5svw;
}

.Notoriety-Thumb {
  margin: 32px;
  width: 100%;
  height: 50svh;
  max-width: fit-content;
  max-height: fit-content;
  object-fit: cover;
  border-radius: 16px;
}

@font-face {
  font-family: Varela Round;
  src: url("VarelaRound-Regular.ttf");
}

::-moz-selection {
  /* Code for mozila based web browesers */
  background-color: #f7e7ce;
  color: #0f0f0f;
}

::selection {
  /* Code code for every other web browesers */
  background-color: #f7e7ce;
  color: #0f0f0f;
}

html {
  margin: 0px;
  padding: 0px;
  background-color: #0f0f0f;
  color: #f7e7ce;
  font-family: "Varela Round", sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.section1 {
  font-size: 8vw;
  height: 100svh;
  width: 100svw;
  text-align: center;
}

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

.logo1 {
  height: 8vw;
  margin: 1vmax;
}
.Notoriety-Title {
  margin: 48px;
  width: 100%;
  border-radius: 16px;
  max-width: 800px;
  display: block;
}

.smalltext {
  font-size: 16px;
}

.smalltext2 {
  font-size: 5px;
}

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

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

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

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

@media screen and (max-width: 1000px) {
  .section2 {
    width: 100svw;
    height: 100svh;
  }

  .picture1 {
    display: flex;
  justify-content: center;
    align-items: center;
    display: none;
    margin: 0px;
    width: 100svw;
  }
  .Notoriety-Thumb{
    width: 100svw;
    height: 100%;
  }

  .text {
    width: 100%;
    display: none;
    margin: 0px;
  }
}

.section2 {
  width: 100svw;
  height: 100svh;
}

.picture1 {
  display: inline-block;
  width: 48%;
}

.text {
  display: inline-block;
  width: 48%;
  margin: 16px;
}

.Notoriety-text {
  font-size: 24px;
}
.Notoriety-title {
  font-size: 5svw;
}

.Notoriety-Thumb {
  margin: 32px;
  width: 100%;
  height: 50svh;
  max-width: fit-content;
  max-height: fit-content;
  object-fit: cover;
  border-radius: 16px;
}

<!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="favicon.ico" />
  <script defer src="main.js"></script>
  <title>Moonstone Games</title>
</head>

<body>
  <div class="section1">
    <div class="maincontent">
      <img class="logo1" src="Logo.svg"
        alt="Moonstone Logo - a crescent moon fractured into five equal triangular pieces" />
      <p>Moonstone Games</p>
      <br />
    </div>
    <p class="bottom-text hidden">Scroll for more</p>
  </div>
  <div class="section2">
    <div class="picture1"><img class="Notoriety-Thumb" src="Notoriety.png"
        alt="Three masked men are shooting at police officers. The three masked men are probably robbing a bank in which this photo was taken.">
    </div>
    <div class="text">
      <h1 class="Notoriety-title">Notoriety</h4>
        <p class="Notoriety-text">Notoriety was a co-op FPS game on Roblox, where you and friends planned daring heists
          with missions, weapons, gadgets, and disguises. It was created by Brick_man. It was previously named Payday 2, and
          had 227.3 million visits, 1,330,000 favorites, and a 91% approval rating.
        </p>
    </div>
  </div>
</body>

</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="favicon.ico" />
  <script defer src="main.js"></script>
  <title>Moonstone Games</title>
</head>

<body>
  <div class="section1">
    <div class="maincontent">
      <img class="logo1" src="Logo.svg"
        alt="Moonstone Logo - a crescent moon fractured into five equal triangular pieces" />
      <p>Moonstone Games</p>
      <br />
    </div>
    <p class="bottom-text hidden">Scroll for more</p>
  </div>
  <div class="section2">
    <div class="picture1"><img class="Notoriety-Thumb" src="Notoriety.png"
        alt="Three masked men are shooting at police officers. The three masked men are probably robbing a bank in which this photo was taken.">
    </div>
    <div class="text">
      <h1 class="Notoriety-title">Notoriety</h4>
        <p class="Notoriety-text">Notoriety was a co-op FPS game on Roblox, where you and friends planned daring heists
          with missions, weapons, gadgets, and disguises. It was created by Brick_man. It was previously named Payday 2, and
          had 227.3 million visits, 1,330,000 favorites, and a 91% approval rating.
        </p>
    </div>
  </div>
</body>

</html>

also i have js but i dont thik thats the cause

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    console.log(entry);
    if (entry.isIntersecting){
        entry.target.classList.add('show')
    } else {
        entry.target.classList.remove('show')
    }
  });
});

const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach((el) => observer.observe(el))

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    console.log(entry);
    if (entry.isIntersecting){
        entry.target.classList.add('show')
    } else {
        entry.target.classList.remove('show')
    }
  });
});

const hiddenElements = document.querySelectorAll(".hidden");
hiddenElements.forEach((el) => observer.observe(el))

Bardacoon•13mo ago

have you tried shrinking your browser even more?

★ stargirl ★OP•13mo ago

yes but then the image is weird

Bardacoon•13mo ago

You set its width to 48%

★ stargirl ★OP•13mo ago

oh ye right ok so i set it to 100% but now it looks like this? i set all the width values that were svw to %

@font-face {
  font-family: Varela Round;
  src: url("VarelaRound-Regular.ttf");
}

::-moz-selection {
  /* Code for mozila based web browesers */
  background-color: #f7e7ce;
  color: #0f0f0f;
}

::selection {
  /* Code code for every other web browesers */
  background-color: #f7e7ce;
  color: #0f0f0f;
}

html {
  margin: 0px;
  padding: 0px;
  background-color: #0f0f0f;
  color: #f7e7ce;
  font-family: "Varela Round", sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.section1 {
  font-size: 8vw;
  height: 100svh;
  width: 100svw;
  text-align: center;
}

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

.logo1 {
  height: 8vw;
  margin: 1vmax;
}



.Notoriety-Title {
  margin: 48px;
  width: 100%;
  border-radius: 16px;
  max-width: 800px;
  display: block;
}

.smalltext {
  font-size: 16px;
}

.smalltext2 {
  font-size: 5px;
}

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

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

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

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

@media screen and (max-width: 1000px) {
  .section2 {
    width: 100%;
    height: 100svh;
  }

  .picture1 {
    display: flex;
  justify-content: center;
    align-items: center;
    display: none;
    margin: 0px;
    width: 100%;
  }
  .Notoriety-Thumb{
    width: 100%;
    height: 100%;
  }

  .text {
    width: 100%;
    display: none;
    margin: 0px;
  }
}

.section2 {
  width: 100%;
  height: 100svh;
}

.picture1 {
  display: inline-block;
  width: 100%;
}

.text {
  display: inline-block;
  width: 100%;
  margin: 16px;
}

.Notoriety-text {
  font-size: 24px;
}
.Notoriety-title {
  font-size: 5svw;
}

.Notoriety-Thumb {
  margin: 32px;
  width: 100%;
  height: 50svh;
  max-width: fit-content;
  max-height: fit-content;
  object-fit: cover;
  border-radius: 16px;
}

@font-face {
  font-family: Varela Round;
  src: url("VarelaRound-Regular.ttf");
}

::-moz-selection {
  /* Code for mozila based web browesers */
  background-color: #f7e7ce;
  color: #0f0f0f;
}

::selection {
  /* Code code for every other web browesers */
  background-color: #f7e7ce;
  color: #0f0f0f;
}

html {
  margin: 0px;
  padding: 0px;
  background-color: #0f0f0f;
  color: #f7e7ce;
  font-family: "Varela Round", sans-serif;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.section1 {
  font-size: 8vw;
  height: 100svh;
  width: 100svw;
  text-align: center;
}

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

.logo1 {
  height: 8vw;
  margin: 1vmax;
}



.Notoriety-Title {
  margin: 48px;
  width: 100%;
  border-radius: 16px;
  max-width: 800px;
  display: block;
}

.smalltext {
  font-size: 16px;
}

.smalltext2 {
  font-size: 5px;
}

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

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

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

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

@media screen and (max-width: 1000px) {
  .section2 {
    width: 100%;
    height: 100svh;
  }

  .picture1 {
    display: flex;
  justify-content: center;
    align-items: center;
    display: none;
    margin: 0px;
    width: 100%;
  }
  .Notoriety-Thumb{
    width: 100%;
    height: 100%;
  }

  .text {
    width: 100%;
    display: none;
    margin: 0px;
  }
}

.section2 {
  width: 100%;
  height: 100svh;
}

.picture1 {
  display: inline-block;
  width: 100%;
}

.text {
  display: inline-block;
  width: 100%;
  margin: 16px;
}

.Notoriety-text {
  font-size: 24px;
}
.Notoriety-title {
  font-size: 5svw;
}

.Notoriety-Thumb {
  margin: 32px;
  width: 100%;
  height: 50svh;
  max-width: fit-content;
  max-height: fit-content;
  object-fit: cover;
  border-radius: 16px;
}

★ stargirl ★OP•13mo ago

Bardacoon•13mo ago

Look, i'd do something like this:

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
img {
  width: 100%;
}

@media screen and (max-width: 1000px) {
  .container {
    grid-template-columns: 1fr;
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}
img {
  width: 100%;
}

@media screen and (max-width: 1000px) {
  .container {
    grid-template-columns: 1fr;
  }
}

<div class="container">
  <img src="https://unsplash.it/500" />
  <section>
    <h1>Title</h1>
    <p>lorem alsdkjflaskdf laksdj falksdjf asdkflja dfk </p>
  </section>
</div>

<div class="container">
  <img src="https://unsplash.it/500" />
  <section>
    <h1>Title</h1>
    <p>lorem alsdkjflaskdf laksdj falksdjf asdkflja dfk </p>
  </section>
</div>

★ stargirl ★OP•13mo ago

oh wow thank alot 🙌

Bardacoon•13mo ago

np And also the order of the css code matters. If in the css I wrote you place the @media query code oon the top, it will break everything

★ stargirl ★OP•13mo ago

oh didnt know that thanks 👍

Gaming

Programming

A simple responsible layout