Hi all! A call for help.
I have checked everywhere including a nice page a fellow camper recommended me https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I’ve read it through and through and that was what helped me with the design in the first place.
And I’m stuck in such a dumb way it seems! I’ve tried everything but couldn’t make the second white box go below the two first boxes and so creating a layout for small cell phone screens.
I know it must be a simple code I’m skipping. I mean, there must be something with the width of the main element that acts like container? I don’t know.
So if someone can help me with this, it would be rad. And thanks in advance.
Here’s my pen so far: Edit: I started a new fork https://codepen.io/33P/pen/VwvojEv
To be honest with you, I would would start over completely with your CSS. You’ve got a lot of issues in there, too many to list here. Wipe it out completely and start from scratch. And when you start over, start with your browser as narrow as you can make it. Style for the narrow width first and then you can add additional styles with break points for wider view ports.
A few suggestions:
- If you find yourself adding CSS properties like
padding-right: 1000pxandmargin-top: 1500pxthen that should be a warning that you are not approaching the solution correctly. - Don’t try to solve horizontal space issues by just making the font size smaller. You should solve those issues by rearranging the elements so they fit in a narrow width.
I believe what you want to do is nest the group of elements you are trying to align vertically in their own “container” - most likely a good ol’ fashioned div
That way you can add the property display: flex to the container and better control how the elements behave using the flex-direction property.
@bbsmooth You know, I’m really persistent. At some point in the future, maybe tonight if I have the time, I’ll keep on trying, this time since the beginning.
My question is, if I narrow the viewport in my browser, the default width would still be the same. I mean, you see less but doesn’t mean the width is not there.
The nav-bar I think is the main problem.
I’ll try rearranging the items in a column not in a row.
My other projects resized perfectly when seen on a cell phone.
Gonna work around that header and bar and see if things get better.
Thank you both for your help.
@aburns009 too.
Responsive design means that your page width narrows as the view port (browser width) narrows. If I narrow my browser to a width of 400px then your page width should also be 400px. If you page width is greater than 400px then you get the dreaded horizontal scroll bar which you really don’t want. For a page like this with such simple content and layout, there really is no reason that you shouldn’t be able to do this. If you are seeing a horizontal scroll bar then you aren’t doing responsive design correctly. Or, if the right side of your page is being cut off as you narrow then browser width then you aren’t doing it correctly.
@bbsmooth Please be honest. Do you think I should go on with this or it would be best if I dedicate to other things. You said the issues were too many to mention. Maybe I should give up. A gorilla can’t sing but he’s happy being a gorilla. That’s what I mean.
I didn’t say you should give up. I said you should start over fresh. This is not a complicated page. You should be able to make it completely responsive. The fact that you are having trouble doing this tells me that you need more practice. Thus, you should definitely not give up but rather work on it even harder so you learn more.
@bbsmooth Thank you. It means a lot. I was a brilliant kid at school with no effort but years of psychiatric treatment have taken toll on my memory. I literally forget what I’ve just read. Now is the time I guess, when I should reverse this. I’ll keep on practicing like you said and maybe something good comes out of it. Thank you.
You have a lot of core concepts down. You just need to keep studying and practicing. You are not alone in that regard.
Be very honest with yourself about your skill level. Identify the areas you need to improve and practice until you understand them.
Like mentioned above, you should review what tools you have in your css toolbox. Practice using and understanding flexbox, grid and media queries. This site helped me learn flexbox by playing a game: https://flexboxfroggy.com/
@aburns009 I’ll do that. I’m sorry I’m not an English native speaker, when you say I got core concepts down do you mean I have them or not. Sorry. And thanks.
intersting tutorial,
i also might to try this. thanks
Hey, I was in your position before.
Try Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
It allows for simple item positioning to be flexible on all screens and formats.
.container {
display: flex; /* or inline-flex */
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
}
As you can see, with just three lines of code on the container element I could put all the items in a row and control how they wrap when screen size is changed. Their is many possibilities and no pain to setting up a grid system.
HTML and CSS are very hard when you don’t use the right tools. No matter how smart or creative you are, dealing with limiting tools will cause you to fail. I would suggest starting all of your CSS over with this in mind in order to do it the right way.
I’ve used it in every single project for the past 2 years as a result of it being easy.
@michaelnicol thank you, I was studying that precisely. I’m stuck now with another thing, I made the page, or should I say the stub of a page, responsive.
Greetings and thanks for the advice.
Your welcome.
I just never could get into bootstrap or CSS Grid for responsive web pages. New doesn’t mean better.
If you are having trouble with responsiveness, have you tried looking at the CSS media rule: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
I change some styling based on web page width. I would use flexbox, but then change the width of each item in percentages (always use percentages for most sizes). For example: A box might take up 50% of the screen on one page screen size, but on a smaller one I could change that to 100%, set the flex direction to a column.
I also set a minimum width of the webpage of around 300 - 400 pixels.
Try to use perfectly square images in any place I can because they shrink better. You can also set their size in percentages to follow their aspect ratios so they shrink evenly on non-square images.
@michaelnicol Wow interesting piece of advice. I use to put the sizes in px but percentage is better as you explained me the same as minimum width a fellow camper had noticed too.
In fact, I’m getting the flexbox thing. If you want to take the time to see what forked until now, you’ll see when I call the in-page hyperlinks they don’t show under the header/nav-bar, they go behind the bar. I’m losing my mind on this, I really don’t know what’s wrong, I’ve tried everything.
So if you like to help, I’d appreciate that.
Here’s my pen so far (without design)
https://codepen.io/33P/pen/VwvojEv
One small tip is - smooth scrolling:
html {
scroll-behavior: smooth;
}
For your navigation bar, what is your goal? What do you want it to look like? The good thing is that it works and is in a row, which is a start.
Don’t loose your mind over this. The first pages we make are hard. Keep in mind that every webpage you see is just a series of containers and items that are put in a certain format. When you put a lot of boxes together you make a webpage.
In order to make my webpages better and better, I looked up tons of example websites and templates and studied what they did. I broke down those websites into sections and started to understand how simple it was.
The FCC fourms look good, but look around. Nothing on this webpage is massively complex besides the time bar on the side. Just tons of boxes inside of boxes. Using the right font simplistic color schemes allows the webpage to look modern. Nothing here strains the users eye either.
If you still have trouble with flex box i would encourage you to check out Dev-Ed’s channel, he does Web Development tutorials sometimes and he is a funny guy.
Link to the Video
@michaelnicol Thank you for that way of thinking. I’ll apply smooth scrolling and see what happens. This is the first time I’ve heard of it haha. So thank you very much. A fellow student told me the boxes analogy, too. I’m such an intuitive person it’s hard to use my mind like a framework like this! But that’s the challenge, right?
@damdey10 I’m gonna check that video as soon as I can. Thanks!
Just remember that the best tool sometimes is to start over. All it can take is one rouge CSS line to mess up your entire navigation bar without you knowing what is wrong. Hours are wasted stressed and rethinking your programming abilities.
Sometimes I just restart and rethink how to break it down for a different approach. Those links you used in your navigation bar are just boxes. So just take them and put them into a row. Sure they may act differently since they are a different type of HTML element (different default CSS then a normal div), but you learn to work with it. It may require more styling as a result.
I am not encouraging just constantly quitting without trying, but sometimes you know that you are in too deep and messed something up along the way. I don’t restart the entire project, but just small parts if I know I messed that specific area too much for the time it would be worth to debug.
Look at every single navigation bar on this website. All they are is just words next to each other. Yet they fit in so well. Simplicity is key. Users don’t want to be subconsciously sensory overloaded and therefor strain their eyes trying to navigate the UI. That is why so many websites look the same in today’s time. Web developers, over time, discovered that simple and modern themes without any background images are best.
When I mean eye strain, it can be anything that is hard to read and look at.
I actually wrote a mini-article about this on FCC for some big tips on how to improve your webpage. Check it out here; keep in mind most of the links to example webpages don’t work anymore.
Here are some quick examples.
- Image backgrounds. You should never have a large amount of text over top of a image. Here is a example of my portfolio page, where I specifcally used a dark image background that did not vary in color that much. On top of that, I used big bold white text over top of it. This is a very simple design that you will often see on many webpages but ignore it.
- Bright colors. No matter what you do, they will never look good.
- Colors that are not friendly to color blind users
- Bad color schemes like green and purple. Look at my useful sites below for a color scheme generator website called Coolors. Below that link you will find another link for some of the most highly rated color schemes for you to use.
Here Is a site of useful programming tools: https://codepen.io/Mike-was-here123/post/check-out-these-sites
On a side note, I see you are learning. Be happy and don’t give up. I was in your position too at some point. Everyone was.
@michaelnicol I forked a new pen starting from zero, now the nav-bar is functional and responsive.
https://codepen.io/33P/pen/VwvojEv
I’ll have to address the color thing though. Thank you so much for all your tips and teaching and for taking time and effort to help me. Your words and links are so valuable. Thanks.