56 Replies
i just started coding like a few weeks ago and i got an assigment of making a responsive webbsite and well imanged to make the pictures responsive but then the text thats on the pictures arent and ive got no clue why or how to fix it
What are you trying to accomplish?
Nice. Another swedish guy xD
Anyway, use font-size with clamp
Here is an awesome site to generate font-size with clamp https://clamp.font-size.app/
Font-size clamp() generator
Generate linearly scale font-size with clamp()
well i want the text to be inside the picture and not cross outside which it doesnt and the text is center on a big screen but when i resize it to smaller sizes it keeps appearing to the left all squished up
this is what it looks like for instance on big screen like just the pic
when i make it smaller you can see that the paragraph just get squished there and if i make it even smaller the text appears outside the pic
You have a max-width of 15px on your
.card p
That removes the paragraph squish
Other than that you have horizontal scrolling. You have defined widths and heights on your .card. Remove those. Add clamp() like @tok124 (CSS Nerd) suggested for your font sizes as well. No overflow after that.So what youre saying is that i remove this part? and then use the website he sent and put in the same width and just use the clamp or am i misstaken?
sorry i new at coding so im abit slow when it comes to this xD
You're good! Yea so you want to move the
width and height attribute. And probably top and left too. I'm not sure why you're absolutely positioning your cards here but you probably don't need it.
Honestly, I recommend just restarting completely after you watch some of Kevin's beginner videos (flex and grid too).
You mentioned this is for an assignment: Are they teaching you to use css like this in your course?Literally my teacher isnt teaching anything he gave us a youtube video that didnt tell us anything and during our "lessons" he does games xD so yea ive tried watching other peoples videos to try and "self learn"
but yea i tried the clamp and issue with the clamp is it makes the pictures very small on the normal size screen
makes the look like this
them*
Don't use clamp on the picture, use it on the font-sizes
Clamp takes a minimum value, a preferred value, and a maximum value
.card is the actual picture thats why i did it but yea
i tried giving the h5 and p a class
So if you want your h2's font-size to be no smaller than 20px, no higher than 32px, then you'd want to do something like
font-size: clamp(20px, 20px + 0.5vw, 32px). The 20px + 0.5vw is the preferred value; you'll see a preferred value like that pretty commonly across websitesand then use clamp and wont need to use @media right ?
Don't use a
h5 here. You rarely need anything lower than a h3.
Exactlyalright ill change that then 😄 all give it a go and see what happens 😄
I also noticed you were selecting your
h5s with something like .h5text class. You can just target the h5s directly
Making your css more complicated than it needs to beah ic 😂 alright! yea
i have to have this done by friday thats why i was getting stressed 😂
Lol I've been using css for a few years and still make my css way more complicated so dw
and i asked my teacher and he straight out ignored me :,d
Yea sounds like you have a shitty teacher lol
He probably doesn't know tbh
yea no shit 😂 everyone in my class is basically shit talking him
"Never attribute to malice that which is adequately explained by stupidity." 😂
honestly wouldnt suprise me since one of my classmates looked him up and for the last 7 years he has been working as a swim teacher
and now all of a sudden he teaches webdevelopment 😄
Oh yea, he definitely doesn't know then. CSS has come a long way in 7 years
ye i assume because people in my class asked about flex box and flex grid and he kinda brushed past the comment without really explaining
Lol that's really bad. Are you in University? (Don't know what they call it in Sweden)
Yes
i literally just started been like 2weeks or maybe 3 now
If you're paying money for that I would definitely take it up with whoever is in charge of that department and ask for a refund or something
Nah its free in sweden most unis etc is free
Ah I forgot. An actually civilized country haha
but yea ive talked with a few people and i told them we should take this up with the board because this is truely not ok
like i came here to learn and im basically having to teach myself
through youtube 😂
Well regardless that's what you'll have to do anyway, even if you have a good teacher. Your whole career is just self-learning and figuring things out haha
true, but it would be nice if he could literally respond to questions about a problem you encounter
Yea for sure I agree
instead he either ignores you or like avoids the question with a question
Hopefully he doesnt give me a shitty grade for this assignment 🤷♀️
Can always go to the board and complain if he does 😂
hahaha true that! 😂 btw it worked!
Thank you so much ❤️ ! like honestly was working with this issue for about 7 hrs and had no idea how to fix it
Ay nice! Glad it worked
I never watched this course from Kevin but I recommend before the next assignment trying to go through this: https://www.youtube.com/watch?v=LGQuIIv2RVA&list=PL4-IK0AVhVjM0xE0K2uZRvsM7LkIhsPT-
Kevin Powell
YouTube
HTML and CSS for Beginners Part 1: Introduction to HTML
This video is the first in a series aimed to help you learn HTML & CSS, giving you the tools to build your very first website!
We're starting at the very beginning with this one, looking at how HTML works.
The goal of this series is to give you a good enough understanding of HTML and CSS to let you build your first website on your own!
Subscr...
Alright ill give it a go thank you! hopefully this helps me since ive mostly been watching like this youtuber like and indian called greatstack xD and well he doesnt explain why he does the stuff he does and im stuck there doing what he is doing but not understand what it is im doing sooooo hopefully this helps me out 😂 !
Yea Kevin is a really good teacher imo. Tells you why he's doing something
that's honestly amazing!
that will help alot because i don't wanna get a grade and not understand what i just did 😂
Ye for sure. If you wanna make a career out of web dev really take in html/css/js honestly. Lots of people like to just learn a framework without understanding how the web works
yea and that was why i was super worried well thus far i mean i have this teacher for another 3 weeks i believe and then we get another teacher that will teach us js
cause he is supposed to teach us HTML and Css
You cannot properly learn html and css in 6 weeks 😩
yea idk what i believe the will do it that right now we doing html and css with agile methods?
after that we learning javascript 1
and then its says Basic programming
so i assume they will go back to html and css then not sure though
idk gl tho seems interesting haha
hahaha that's one word for it 😂
Funny thing is he gave us a video he had made himself which was 3 hours long and his "finished product" and what he then asked of us was baffling because he wanted so many things that he didn't even tell us about but yea 😂 im ranting now haha
but honestly thank you so much for the help this will help me with future websites etc!!!
Alright i should close this post not really sure how hahaha :,d
Ahh i did it thank you again!!!