Website responisve
Hi, i started my journey towards fullstack developer about 3 weeks ago and i accepted to create a website for a relative but i run into a problem with website responsive, i don't understand how to do it properly and i have to finish this website to be able to fully dedicate my time towards programing , i used only html and css and i will put my github repo here, could someone please help me finish this project, the website looks good on the desktop version for a 2k monitor because this is the monitor i use but on anny other resolution the design goes apeshit https://github.com/Apophis96/europ-trans2 this is my repo and this is the deployment https://apophis96.github.io/europ-trans2/
GitHub
GitHub - Apophis96/europ-trans2
Contribute to Apophis96/europ-trans2 development by creating an account on GitHub.
8 Replies
How much are you familiar with media queries?
Generally, the best practice is that you start with mobile layout (basically all in single column) and then add breakpoints and rules for wider devices ... such as
@media (min-width :600px) {
/* css for tablet portrait */
}
@media (min-width :960px) {
/* css for tablet landscape */
}
@media (min-width :1200px) {
/* css for tablet desktop */
}
...where you override the mobile CSS rules (all in single column) with "stuff more in rows next to each other".I'm not familiar with media queries, i found out about them when i started to do reasearch about website responsive but i don't understand them verry well, a thing i found out is that i have a loat of widths and heights declared in my css and that can mess up the responsive of the site.
From your message i understand that i should include this tags in my css and add all the tags i want to be changed for diferit devices, no?
Exactly. These media queries, the breakpoints, are the "loat of widths". You do not need to worry about heights.
Add them to your CSS and then add
h2 {color:red; }
in one of them. Your current style will act as a mobile (h2 will be black if screen is small), but will turn red as soon as the viewport width goes over the width treshold specified in the @media breakpoint.Thanks, i'm working on it and i will come back with an update
Have a look at ome of the "responsive webdesign for beginners" YT vids and play around to understand the CSS cascade.
(also, Kevin has a free course called Conquering Responsive Layouts https://courses.kevinpowell.co/conquering-responsive-layouts)
Thanks to the awesome help from members of this community, today I was able to deliver my first project to my client, just three and a half weeks after I started learning programming. Thank you @cubiq, @smileyface (c34), and to everyone else who taught me how to finish my project.
I became so confident in css after this one
coming for backend background