Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi, I've been watching some tutorials and guides to make pages responsive, but I'm still struggling with it and I've applied some things and nothing seems to work. I was wondering if someone could help me with this specific page (my first project ever):
https://codepen.io/jomby/pen/NWvVNpQ[^]

If someone could tell me how to make this example responsive, or even want to write the elements on the CSS in the answer, I would appreciate it a lot.

Rather than an explanation I'm looking to how to make this codepen page responsive so that I can learn from this practice.

Thank you very much in advance for your patient.

What I have tried:

I've been trying to make my page responsive, without success. In smaller screens, the text stretches a lot and also the gallery, for example.
Posted
Updated 25-Nov-21 8:09am

1 solution

heyy how you doing?! to make a page responsive you need to get used to the use of max-width and width make sure that everything in the page has got its own parent (example: images can have a figure as a parent p could be set in a section...) u should try to reduce the use of div and try using sections, articles, figures... example code:

//css

main{//the main is set in the body

max-width:100%;//giving the main a 100% maximum width
width:100%;//the actual width would be 100%//you could change it as you like (80% would look cool too)

}
//if u had a picture in the main always put the picture in a figure

//html
main
figure
img
/figure
/main

//doing that could give you an easy way to interact with everything in the page

//css

figure{
max-width:100%;
width:100%;//you could always change the size
}

//and lets give the picture a 50% size of its parent

img {
width:50%;//this way your picture will change its size according to the parent's size
}

GOOD LUCKKK!!!
 
Share this answer
 
v4
Comments
jombyy 25-Nov-21 15:32pm    
Wow, thank you so much, it's actually what I needed to start. I really liked your explanation so I'm going to try again! :)
SilentH11 25-Nov-21 20:27pm    
you are very welcome!!!🤗

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900