13 Replies
as you can see its all effed up
how or where should I start?
Do you have the media query on your css?
what kind of media query do you reccomend?
I mean, if your media query has been called, your css will be overriden
I'm not that sure about media queries for now because its been a long time since I did a responsive design up to movile scale
it's really going to help if you share your code, preferably in codepen
check out #how-to-ask-good-questions for more tips on how you can share your code
I always recommend following Kevin's CRL course if you're struggling with responsive layouts. It's free: https://courses.kevinpowell.co/conquering-responsive-layouts
Kevin Powell
Conquering Responsive Layouts
Are you ready to take the challenge and finally figure out responsive layouts? Click the button below and jump in!
as for what media query, the only real answer is that it depends. Media queries are a way to fix your site when it breaks at certain widths. Usually you go for either a minimum or maximum width for certain rules to apply. That depends on what design you made first, and how your site is breaking
but CRL will give you a solid base in how to think about designs so you make them responsive from the start
thanks man that's really useful (:
To start, I'd recommend a quick pencil sketch in a notebook or making Figma mockup of what you want. Coding to a design usually yields better results than just coding something, looking at what shows up in the browser, and then asking yourself "What does this need?"
When I did my personal portfolio site, I spent 3 days doing the Figma for it. Then I coded it out in another 3 days. If I had not invested the UI time in, the development would have taken much longer and with worse results.
I have that
But its tough man
even just that first part at the top, with the image and the text to the left
still figuring that out
Okay, that helps to give guidance on what you're doing.
For the hero section, I don't know what you want the mobile layout to look like, but you can start with using a grid layout to set the Text section (header, text blurb, and action button) and the image section. Make a top level container (
<div>, <section>, etc.) for text and image contents, then place them in a parent container wiht the grid column and row definitions.
Grid will give you control over how many rows and columns you want, gaps between them, and what size/ratios your colun and row widths are.
Then using either grid-template-areas or grid-column-start/grid-column-end and grid-row-start/grid-row-end on the text and image containers to choose how they stack at different media queries.
https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areasMDN Web Docs
grid-template-areas - CSS: Cascading Style Sheets | MDN
The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names.