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! šŸ™Œ
No description
20 Replies
Bardacoon
Bardacoonā€¢13mo ago
Can you send your code so far?
ā˜… stargirl ā˜…
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
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 ā˜…
thanks
Bardacoon
Bardacoonā€¢13mo ago
excatly And if you want you can also add the language of your code after them so you have highlighting
ā˜… stargirl ā˜…
cool
Bardacoon
Bardacoonā€¢13mo ago
wait what's the problem, it's already responsive
ā˜… stargirl ā˜…
it looks like this for me
Bardacoon
Bardacoonā€¢13mo ago
No description
ā˜… stargirl ā˜…
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
Bardacoonā€¢13mo ago
have you tried shrinking your browser even more?
ā˜… stargirl ā˜…
yes but then the image is weird
No description
Bardacoon
Bardacoonā€¢13mo ago
You set its width to 48%
ā˜… stargirl ā˜…
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;
}
Bardacoon
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 ā˜…
oh wow thank alot šŸ™Œ
Bardacoon
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 ā˜…
oh didnt know that thanks šŸ‘
Want results from more Discord servers?
Add your server