When its in full view - my page seems to slip and slide about. How do I just have it fixed so when its viewed, you do not need to scroll to left or right to see all of it ?
In the first flexbox area, it says ‘chocolate’ in my html but it does not show it rendering that text on the page.
Finally, no matter what I do I cannot seem to get the nav-bar elements (the three words) higher up and within the pink area. Ideally I would like it all together.
Thank you so much if you can help with this…still so much more to do and learn!
Link here https://codepen.io/dotdashdon/pen/WNREorw
On a side note, codepen provides the boilerplate for you. It only expects the code you’d put within the body element in the HTML editor. (No need to include the body tags). For anything you want to add to the <head> element click on the ‘Settings’ button, then HTML and add it into the ‘Stuff for <head>’ box.
you have elements out of order. Everything the browser renders belongs in the body element. Review this for an understanding of the HTML boilerplate tags.
Can anyone help me to understand how I might move subtitles/captions for the images in the <div class="choice"> section? Ideally I would have them above the images displayed in the box. Hoping that makes sense and would love it if someone could help me out!
Hi @dotdashhenry. You’ve got a cool webpage. I have some suggestions for you.
Eventually you will want to make your website responsive to all screen sizes so it’s best to design with a mobile-first approach. If you use a desktop-first design approach, it will be harder and take longer to make your CSS code clean.
Put your pink background on your header element instead. This will allow you to have your pink background behind your nav-bar.
Then make your header have a position of fixed. Your h1 belongs inside your header element.
Thank you @Problem-solver , really thank you for the suggestions…I will definitely take heed of suggestion re mobile-first approach.
I have removed the pink background and added color under the ‘header’ in css but it is not showing up… any more clues as to what i am not doing? https://codepen.io/dotdashdon/pen/WNREorw
<nav id="nav-bar"> belongs directly above your opening ul tag.
Your h1 must be placed in your header in your HTML. It worked for me to put the h1 below the nav element but not in the nav element.
Remove the margin-top of 20% that you have on your h1 and give it a much smaller margin-top like 5%.
Give your header a negative margin-top and a width of 100% to make it begin at the top of the page and take up the full page width.
Move your header-image HTML to be at the bottom of your header element within your header element
Give your header-image a negative margin-top to bring it closer to the top and to make your header background-color not be as tall. Try margin-top: -7rem; and adjust it to your liking from there. You might have to adjust your CSS for other selectors in order to get your header-image to be positioned higher.
group your nav-bar CSS closely together and distinguish it from the rest of your CSS with a short descriptive CSS comment
It’s a good time to get a better understanding of how nav-bar’s work. You have quite a bit of unnecessary CSS for your nav elements.
I’ve learned more in the process of helping you so thank you for that. Also, thank you for being so appreciative of my help. It’s fun to help people that show appreciation. Please feel free to let me know if you want help with anything else or if you need further clarification of what I’ve said.
Oh my goodness - what an ace to-do list! Thank you (again). I am going to get to work on this . Your input definitely makes a difference - I will also look at the value of using rem again. Superstar @Problem-solver !
FYI I tested out all of my tips on your code pen and together they achieve what you want . My tips will only achieve what you want if they are applied in combination.
oh that’s interesting! Its not going to plan so far…I completed the first point - to move the <nav-id=“nav-bar”> under the ul tag…this was great as it move my nav-button-link-things to the top . But then my img disappeared but the tests were showing as passing so it was there somewhere! Anyhow, an image is back and showing now…I have just tried to place the h1 in the header. It is really not working! It’s all bunched up as a block of colour so just trying to work out what I have done to do that…this is keeping me busy , that’s for sure!
I’ll keep persevering but do keep checking back and I will take note to apply all the points you suggest in combination
Hmm I have implemented your changes aside from messing about the css and I have lost my header h1 somewhere …might have to try again tomorrow! So close! Any clues or pointers welcome! I wonder how I am doing this so differently to you?!
It’s easier for me to just show you so I made a copy of your code pen and made changes to it. I got it to how you want it. I had to make even more changes(outside of the tips that I shared) than the first time I edited your code pen because you made some changes. Here’s a link to your code pen with my code. https://codepen.io/creativecodepenuser/pen/GRryNXz I’ll delete it later after you are done with it.
This is extremely generous @Problem-solver . TRULY big thanks. I am going to take time tomorrow afternoon to compare what you’ve done with my own efforts. I can see that you have used additional labelling , such as adding ‘doughnuts-container’ as well as using ‘order’ in css. It’s brill - you’ve clearly got the hang of it !
As I said, I will look properly tomorrow pm as its v late now…but thank you once again . I submitted it already for FCC cert but this is another round of learning.
Hi @Problem-solver ,I have just revisited your suggestions and compared with my own efforts. I went through line by line at least three times and adapted my html and css to match your effort. Brilliant results so thank you but this has been more useful than just solving the issues on the page…I have taken it as an opportunity to read up again on using rem (and how important that is), will also make note to use
more freely as this seems to have organised the elements better…I have revisited the use of class & id which has been useful to confirm and remind myself of their functions. Finally, I looked up Order property in css as this seems to have been very helpful. Really interesting to read about and I look forward to trying to use it myself. I dont know if you are aware though ( and this is my attempt at giving back to you ) but it is not always recommended for accessibility to use Order.
This is taken from the MDN website…
‘Using the order property will create a disconnect between the visual presentation of content and DOM order. This will adversely affect users experiencing low vision navigating with the aid of assistive technology such as a screen reader. If the visual (css) order is important, then screen reader users will not have access to the correct reading order.’
So I wonder how you would suggest doing it without using the order property. I heard that only 2% of websites are accessible to the kind of users referred to above. Anyhow, that tiny bit of knowledge is an attempt to reclaim something of credibility - thanks so much for your brilliant help! Look forward to your next sites and challenges.
Yes, you want your code to work well for screen-reader users, and the order property only changes the order visually. Screen-readers will read in the order that your HTML is arranged.
. My tips will only achieve what you want if they are applied in combination.
I have implemented your changes aside from messing about the css and I have lost my header h1 somewhere …might have to try again tomorrow! So close! Any clues or pointers welcome! I wonder how I am doing this so differently to you?!
. I submitted it already for FCC cert but this is another round of learning.