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
Can you send your code so far?
sure
just wait a sec please
Html
Css
oh well
<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>
@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;
}
when you send blocks of code you can wrap them with:
type 3 of these: `
// your code
then 3 of those again
thanks
excatly
And if you want you can also add the language of your code after them so you have highlighting
cool
wait what's the problem, it's already responsive
it looks like this for me
wait
let me send the full code
maybe its because of that
also i have js but i dont thik thats the cause
@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>
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))
have you tried shrinking your browser even more?
yes but then the image is weird
You set its width to 48%
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;
}
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>
oh wow thank alot
š
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 everythingoh didnt know that
thanks š