Beginner looking for support!
Hey! So I've been learning HTML and CSS for the past month with a good friend of mine, but i've always struggled with breakpoints and responsiveness, the site just collapses and i find so many issues when i start changing viewports, just wondering if anyone had any feedback or tips or anything of the sort for this, thanks again!
23 Replies
Hey. Few weeks into CSS after putting down coding for months. I'm working through some class projects and would be happy to share what I've grasped thus far, and/or a number of resources if you prefer to just work through them that way. Let me know what works for you
if the site just collapses, then you are doing something really really bad, like setting a fixed height or wrong sizes on things
yeah sure id love that!
it depends, sometimes elements domt resize like they do on the references which confuses me, having me to manually change their wifths etc
sounds like you suffer from brittle design
but without where to see this, we're guessing
if you have to put widths all over, you did something super wrong
uhh gimme a second
Frontend Practice | Starbucks Project
Can you recreate this rewards page.?
this was the project reference
https://unluqy1.github.io/starbucks-clone-project/
this was my attempt, so far
i also finished my current course thing so if you guys have any, do you recommend any courses / roadmaps or anything
yickes! i just checked on my phone and it is very broken
but really good for a first attempt
yeeah i havent done much for phones yet
i was mainly doing desktops and laptops
yeah, its good to start somewhere
but yeah this is the issue i get hahaha, and when i size it down slightly i had to change a buunch of widths for the background image and stuff to make it look like the original
yeah!
did you use percent values? viewport values? or pixels?
i think for paddings and stuff i used em or px, for the image i used percent values
but on the original it seems to size down perfectly without needing to adjust the width so im a little confused on that
also if u have any ^ im a lil lost atm now hahaha
i actually dont know any, as i learn by necessity
It’s hard to text about code (for me) but I’m happy to jump in one of the voice chats. Or I can just send you some links
yeah id be fine w links im young so i dont have a quiet room or anything to vc in
That's ok. I was young a while back too so I remember how it can be. Props for diving into something to help your future while you're young.
Send me some topics you're curious about & I'll drop you some of the best references I've found (assuming I have it)
I would suggest to learn flex to find a quick way to order and manage responsive containers
the latest video helps too
thanks alot guys, appreciate it
start thinking more in terms of boxes. The box model will really simplify a lot of stuff. If you can create a mental image of the layout in terms of boxes, you just need to push things left, right, up and down mostly, while occasionally hiding them as per the requirements. I am assuming you begin with the desktop version and then keep checking the responsiveness across the reduced screen sizes, which makes it more difficult as you are trying to make it responsive for every frame. You don't have to do this. If you are creating too many breakpoints, chances are you are doing it wrong (nothing is wrong if it works but it could be optimized), and it could be done in a better way.
yeah i start with the desktop version but whats an easier way since u said taht makes it more difficult?
This might help: https://fedmentor.dev/posts/responsive-meaning/
FED Mentor
How to "make a site responsive" and use Media Queries well - FED Me...
You don't always need a media query for a responsive site. Let's unpack what responsive really means...