I’v noticed where i am stuck at. I am really good at HTML5 and CSS3 but i am having a problem which i have noticed
I only need to understand how to build a responsive website “I do know how to create min and max media queries” but how to create costum COLUMN widths using percetanges…
So it sounds like you have been using frameworks for RWD and now you are hoping to learn to do it on your own without them? If so, I’d encourage you to read a few resources on Responsive Web Design. You could Google and get a bunch, but here’s a good starting point:
Learning the basics of how to RWD will help you not only to develop without frameworks, but also might help you to decide for yourself in a more informed way when you think one is appropriate and when it is not - when it is too bloated vs the time it will save you to use it.
Yea thats right… i am totally not a noob i don’t need to know how paragraphs, line heights, fonts etc etc work… i know everything. But only the responsive web design… is what i need to understand.
Btw… does this includes responsive custom COLUMN widths for each window size? for example on mobile a column should be stacked with a width of 100% and on ipad oriented 50%… i guess you understand where i am going? So for a regular deskop min-width of 1200px… and higher it should be 33.33%+ times 4 for 100%…
To be honest, you should read the Foundation/Bootstrap CSS files and see how they do responsive design.
I most certainly do not recmomend you follow that approach, but see if you can understand the CSS in there. THe “basics” of RWD is there. It’s up to you to optimize it.
Using % as widths takes care of most cases. At some point the screen is too narrow for columns, so add a media query breakpoint there, so a
float: left; width: 30%; may become
float: none; width: 100%; if using floats for sidebars. Or you may go down the flexbox route for multi columns, so you may switch
flex-direction: row; to
Btw… does this includes responsive custom COLUMN widths for each window size?
To be blunt, I’m not going to search an article for specific things you want. You’re capable of pressing CTRL+F the same as I am
The best thing you can do is set up a test site and play play play. Set yourself small challenges like making a responsive 2 column grid, then a 3 column and so on. Make mistakes as you go, learn how you correct them and you should start learning on no time.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.