78 Replies
Why my text div is shrinking ?
if I remove my card div it's responsive and works fine.
can't recreate your issue with provided code
https://codepen.io/MannixMD/pen/oNVxyyw
i think it is because of the 450px width of the card with a screen 342px. the card is overflowing the width. the div is only 100%
but that shouldn't impact the div above the card will just overflow
the screen is scrolled horizontally i think
width of card ?
try changing width to max-width
but the above div doesn't have any width
in the card
why card is affecting above div ?
it isn't. the div is 100% = 342px. but the card is larger
then why div is shrinking ? š
it is not shrinking
The problem. Is the ".card" thing because it uses a quite large fixed width
Try changing it to min(400px, 100%)
its shrinking
the card is set to 450px
the div is set to 100%
mobile phones try to make shitty websites usable
so, they show the entire viewport by default
at anything smaller than 450px, the div will "shrink"
the emulation of the mobile view is a bit strange. think you manualy dragged it
yes
on an android phone will show the same
still same
just set a max-width to 100dvw on the .card
it worked but how ?
im struggling with css so hard
š .
because 450 is larger than 390
because it is no longer 450px on a 320px viewport
setting fixed width kills responsiveness
if i don't do that image will kill it
then you set a max width
or use grid/float for a proper layout
that's why you do the reset
img{max-width: 100%; display:block;}
i have width:100% and its workes fine but when i remove width:100% it breaks
just do what i said
also i have a doubt if my image breaks image should only overflow why is above div affected by it ?
i did it worked but i wanna understand
if you set (max)width in percentage it is relative to the container/window. without it, it will take the orginal size of the image
yes in this case image should overflow why is the above div shrinking ?
When you set it a width in px, it will always be that width
If you set it to a relative unit like %, it'll scale with the parents size
but the above div doesn't have any width
it is not shrinking. it has the 100% width.
https://discord.com/channels/436251713830125568/1193598297760333954/1193601489038475416
read that
it is working perfectly fine
it isn't shrinking
oh yes i understood now, but if my device width is less then 450px then how card is trying to get that 450px ?
you set it manually
.card {
border-radius: 10px;
background-color: black;
padding: .5rem;
color: white;
width: 450px;
margin: 4rem 0rem;
}
yes yes I understood now, thank you so much!
what are some bad partices according to you which can break responsiveness ?
and when should i use what unit ?
setting fixed widths
except for borders and stuff, that tends to break stuff
so when working with width i should always go with relative uint ?
setting a width on things also sometimes breaks stuff
well, yes and no
restrict the size by setting a maximum width is okay
i have one more question to ask
this can be combatted by having a proper layout
using grid or float
absoluetely
Waitlyst - Free Waitlist Template for Framer
Waitlyst is a visually appealing and sleek Framer Template tailored to expedite the process of establishing a Waitlist and generating leads.
here in this website the Joint the waitlist text is always splitted in two parts, i mean
Join the WaitList for \n Framerlt Today
but when i try to implement it, i shrinked the width until framerlt Today went downprobably a
<wbr>i mean next line
you can check how it's done in the browser
just right-click > inspect element
I'm so poor with css, how can i improve it ?
practicing
I mostly work with backend but when it comes to my side project i need to work on both frontend and backend and working with css makes things lot harder
on that website it is going to the new line just because it has a normal wrap. there isn't enough space for it on 1 line
also how do you approach responsiveness ? create whole page and work on responsiveness or component by component ?
me? i use an existing platform
existing platform ?
why do all the work if there's something that already exists that has it done by default?
what do you mean by existing platform ?
templates ?
but if i had to do it from scratch, i would design it on figma
yes and no
there's stuff like 960grid
do you buy templates
no, i can make my own, but i bough a few for work
what is 960 grid ?
an old css start point for responsivity
all i need to worry about is everything else, and not the layout
do you use any css framework ?
like tailwind,bootstrap
depends on the situation, i use bootstrap
but learn the basics first
I've been doing web development for the past 2-3 years, but when I have to work with CSS, I find myself struggling and feeling overwhelmed
practice more