CLAMP VS MEDIA QUERIES - mobile friendly

i don't need to use media queries if i use font size clamp right? im trying to make the website responsive on mobile
No description
74 Replies
lafayette
lafayette•13mo ago
see i've clamped all of this already yet it all still doesn't fit on one line when the tab size is the smallest so do i just clamp it further??
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
seems like you have some margin or padding on the sides of your text. i think thats the issue. or you may have set a fixed width for your text container or something. hard to know from just a screenshot
lafayette
lafayette•13mo ago
i need the margin otherwise the buttons will all be super close to eachother when the tab is not shrunk here ill send code
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
Then you need to figure out another way to place each item because they wont fit next to each other with that much spacing
lafayette
lafayette•13mo ago
so i must remove the margin essentially, is there no way to make the margin shrink relative to viewport? or i just have it all in a flexbox container - have that have a margin. and not have the children have margin and then it shld shrink when tab shrinks?
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
well, you could use svw or vw unit. or maybe % should work i guess. or you can just change the margin in a media query
lafayette
lafayette•13mo ago
ohhh ya svw vw thanks forgot abt that
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
Sure no problem 🙂
lafayette
lafayette•13mo ago
I HAVE them as rem tho aren't those responsive already.. rem for font size
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
nah. rem is based on the focument font-size. so the font-size of html tag
lafayette
lafayette•13mo ago
idk why i have margin: 1rem; this is incorrect isn't it SO TEchnically if i use vw/ svw and rem / flexbox i shld never need to use media queries and i'd have a mobile first design?
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
margin:1rem; is valid but it wont scale with screen size. it will remain 1 rem. the only way to change this is to change the font-size of your document
lafayette
lafayette•13mo ago
im using font size clamp but im using it on an img of the github btn so it adjusts when the page size adjusts
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
there is always need for media queries. media queries can be used to change flex-direction from row to column for example which is very useful when making websites for the phones
lafayette
lafayette•13mo ago
is that not allowed? as the img isn't a font? damn ok so i probably will need to write media query regardless
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
you using font-size with clamp on an img tag? an img tag cannot contain any text so yeah that wont really do much for you yupp 🙂
lafayette
lafayette•13mo ago
ya lol
No description
lafayette
lafayette•13mo ago
so this line is all wrong? dam ok thx
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
well, that is width and height with clamp and that is valid you wrote font-size with clamp on img so thas why i was a bit confused. but it works for height and width. but i would probably avoid setting a height on the image. you lose the aspect-ratio of the image if you do
lafayette
lafayette•13mo ago
what do u recommend instead then
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
to not set a height
lafayette
lafayette•13mo ago
just have width? or to not set either?
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
Yeah
lafayette
lafayette•13mo ago
yeah to which
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
just width and you should also avoid inline styling. it has a high specificity level so wont be easy to overwrite that style later on. you would have to use !important which is terrible solution
lafayette
lafayette•13mo ago
kk i'll put it all in css then? i appreciate all this advice btw
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
if you don't like switching between css and html file, you should probably use tailwind Yes Sure no problem 🙂
lafayette
lafayette•13mo ago
No description
lafayette
lafayette•13mo ago
im trying to make it so the toggle btn and the github btn is sized the same but the github icon isn't styling? its so large
lafayette
lafayette•13mo ago
this is the relevant html
No description
snxxwyy
snxxwyy•13mo ago
That’s most likely because your container has a set height on it Or your image isn’t controlled
lafayette
lafayette•13mo ago
oh ya
No description
lafayette
lafayette•13mo ago
it does it does should i not have a set height? should i get rid of set height? wym by that
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
dont set height
snxxwyy
snxxwyy•13mo ago
Yeah don’t set a height If your image overflows, I recommend giving it a max-width of 100%
lafayette
lafayette•13mo ago
what abt the height and width for the body container?
No description
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
and vh is probably the worst option of all the units that exists xD
lafayette
lafayette•13mo ago
shld i not have minheight anywhere?
snxxwyy
snxxwyy•13mo ago
Min height on the body is fine
lafayette
lafayette•13mo ago
when i remove the set height for header container it becomes way too large how do i combat this then
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
you dont need a height. height is set to height:auto; by default. the height will be set depending on your content inside the container. but yes, you can set a min-height of 100vh and 100svh on body
lafayette
lafayette•13mo ago
No description
lafayette
lafayette•13mo ago
it also doesn't solve the github img issue? ill try this
snxxwyy
snxxwyy•13mo ago
Show us the code for the button
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
is your github logo an img tag? or are you using font-awesome?
lafayette
lafayette•13mo ago
look here it is an image tag i used a png
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•13mo ago
well, then try set height:100%; but i would rather use font-awesome.
snxxwyy
snxxwyy•13mo ago
You should really be using svgs tbh
lafayette
lafayette•13mo ago
do u mean like this?
No description
lafayette
lafayette•13mo ago
ok ill convert it for all my images?
snxxwyy
snxxwyy•13mo ago
Not for all, for little icons that’s what I recommend
lafayette
lafayette•13mo ago
kk ill do that and lyk the result
snxxwyy
snxxwyy•13mo ago
Sounds good
lafayette
lafayette•13mo ago
still shows the same output
No description
lafayette
lafayette•13mo ago
i made the png into svg
snxxwyy
snxxwyy•13mo ago
Can you put the html and css code in a codepen for us?
lafayette
lafayette•13mo ago
No description
snxxwyy
snxxwyy•13mo ago
Hm, why did you opt to use span as a button? You should try to use the button element
lafayette
lafayette•13mo ago
i need it like that its a toggle btn
lafayette
lafayette•13mo ago
here
snxxwyy
snxxwyy•13mo ago
Instead of using an anchor tag I recommend using a button tag And then make your image a display block to get rid of the gap underneath it @lafayette
lafayette
lafayette•13mo ago
sum1 else told me it's not actually a btn? it's just styled as a button.. so keep it as an anchor tag
snxxwyy
snxxwyy•13mo ago
Is it a link that takes you to another page? Or is it more of a thing you click that makes something happen?
lafayette
lafayette•13mo ago
its a link that takes them to github
snxxwyy
snxxwyy•13mo ago
Ah so keep it as an anchor, that’s my bad, it might be because the anchor tag is an inline element, they don’t tend to respect certain properties such as margin, try making it a display block and see what happens.
lafayette
lafayette•13mo ago
kk the display block fixes it however it makes it go onto the next line? and it only fixes it cus i adjusted the max:Width to over 100% so the backgroundc overs all of the githu bimg
lafayette
lafayette•13mo ago
No description
lafayette
lafayette•13mo ago
the toggle btn is ruined as well so i can't style the two together?
lafayette
lafayette•13mo ago
but when i take out the toggle btn it looks like this..
No description
snxxwyy
snxxwyy•13mo ago
Sorry, try making it an inline block if you’re facing that issue Did that work?
lafayette
lafayette•13mo ago
i mean ya
snxxwyy
snxxwyy•13mo ago
How you’d like it to?
lafayette
lafayette•13mo ago
my index.html file is back to normal works fine THIS IS STILL THE ISSUE!!
Want results from more Discord servers?
Add your server