https://codepen.io/MochaJoe/pen/GadrzR
Please review.
Questions,
How do i resize img/ text for smaller displays
Is my code messy?
About 2 months self learning in my free time. Thanks for the feedback
-mocha
https://codepen.io/MochaJoe/pen/GadrzR
Please review.
Questions,
How do i resize img/ text for smaller displays
Is my code messy?
About 2 months self learning in my free time. Thanks for the feedback
-mocha
For starters, don’t define your text size in px, use em or rem to make them adjust to the screen resolution and user preferences automatically.
To make your page adjust for smaller displays you need to add media queries:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
For instance, you might add:
@media (max-width: 600px){
#main{ margin: auto;}
#title {margin: auto; font-size: 3rem;}
.img1{width: 100%; height:auto;}
#tribute-image{margin: 0;}
.center{margin:0;}
}
Try it and see what happens when the screen gets under 600px.
As for your code being messy, you’ve got a lot of nested divs with different classes that could be simplified. Look into learning Flexbox and you’ll find aligning things a lot easier.
Full-time web developer here. I use font-size in px all the time. Nothing wrong with it.
If you’re going with media queries the syntax I go with is:
@media screen and (min-width: xxxpx){
}
I also create a non-media rule for each media query.
So like with the suggestion above:
#main {
margin: whatever for mobile;
}
@media screen and (min-width: 728px){
#main {
margin: whatever for tablet and bigger;
}
}
And do that for each one.
Sure… it’s more verbose., but makes it scalable. And more importantly easier to modify / delete old rules in future.
This allows to easily delete or add more rules to each selector in future. You also want a default rule for mobile and queries cover larger sizes. Always design mobile first!
In addition to my post above it’s a small detail,. but i touch my two selectors together that are grouped.
The pair above i dont add an extra line break between,. but additional rules I do.
I also cover only these ranges: 320px, 728px 1366px. Mobile tablet desktop. (320 being for the iphone 4 the smallest).
Oooh and one more final note… avoid IDs if you can with CSS. They’re a pain to work with. Small applications are not a big deal. But once you get to understand how CSS precedence works., you’ll know exactly what I mean.
My suggestions are simply suggestions. Not rules,. just things I’ve learned along the way to make programming easier for myself and those reading my code.
added some media in css and i think fixed it up as best as i could figure out,. img2 breaks on phones any clue why ?https://codepen.io/MochaJoe/full/GadrzR
anyone know why? this is happening?
Just a couple of things I noticed.
codepen provides you with validators for HTML, CSS and JS. Click on the arrow in the upper right and then click on the respective ‘Analyze’ link.
<div id "tribute-info">
text-color:
is not a valid CSS propertyoh man i really broke it thanks
for some reason the tribute page stories require ID’s rather than classes. That’s why there are ID’s galore in the project.
That’s ok., then add both but only reference the class,. or the name attribute.
I personally like the name attribute., but both are still better than using ID in CSS.
Thank you for the feedback, I believe I forgot to save my work I’ll be fixing this up once I get some free time.