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
74 Replies
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??
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
i need the margin otherwise the buttons will all be super close to eachother
when the tab is not shrunk
here ill send code
Then you need to figure out another way to place each item because they wont fit next to each other with that much spacing
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?
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
ohhh ya
svw vw thanks
forgot abt that
Sure no problem 🙂
I HAVE
them as rem
tho
aren't those responsive already..
rem for font size
nah. rem is based on the focument font-size. so the font-size of html tag
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?
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
im using font size clamp
but im using it on an img
of the github btn
so it adjusts when the page size adjusts
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
is that not allowed? as the img isn't a font?
damn
ok so i probably will need to write media query regardless
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 🙂
ya lol
so this line is all wrong?
dam ok thx
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
what do u recommend instead then
to not set a height
just have width?
or to not set either?
Yeah
yeah to which
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
kk i'll put it all in css then?
i appreciate all this advice btw
if you don't like switching between css and html file, you should probably use tailwind
Yes
Sure no problem 🙂
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
this is the relevant html
That’s most likely because your container has a set height on it
Or your image isn’t controlled
oh ya
it does
it does
should i not have a set height? should i get rid of set height?
wym by that
dont set height
Yeah don’t set a height
If your image overflows, I recommend giving it a max-width of 100%
what abt the height and width for the body container?
and vh is probably the worst option of all the units that exists xD
shld i not have minheight anywhere?
Min height on the body is fine
when i remove the set height for header container it becomes way too large
how do i combat this
then
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
it also doesn't solve the github img issue?
ill try this
Show us the code for the button
is your github logo an img tag? or are you using font-awesome?
look here
it is an image tag
i used a png
well, then try set height:100%;
but i would rather use font-awesome.
You should really be using svgs tbh
do u mean like this?
ok ill convert it
for all my images?
Not for all, for little icons that’s what I recommend
kk ill do that and lyk the result
Sounds good
still shows the same output
i made the png into svg
Can you put the html and css code in a codepen for us?
Hm, why did you opt to use span as a button? You should try to use the button element
i need it like that
its a toggle btn
here
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
sum1 else told me it's not actually a btn? it's just styled as a button..
so keep it as an anchor tag
Is it a link that takes you to another page?
Or is it more of a thing you click that makes something happen?
its a link
that takes them to github
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.
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
the toggle btn is ruined as well so i can't style the two together?
but when i take out the toggle btn it looks like this..
Sorry, try making it an inline block if you’re facing that issue
Did that work?
i mean ya
How you’d like it to?
my index.html file is back to normal works fine
THIS IS STILL THE ISSUE!!