blameleo• 20
@blameleo
Submitted
how do i get the body of the page to get darker when i click the side bar? please feel free to advice on best pratices.
DanielK
@DanK1368
All comments
- DanielK• 440
@DanK1368
Posted
Hello,
You can use another div as the parent element of your current navbar, and give it a position absolute. Give it a width and height of 100% to cover the whole viewport.
1 - Byron• 2,180
@byronbyron
Submitted
Hello ladies and gentlemen! Here's my fantastic version of the Intro section with dropdown navigation. I've build this lovely design using Tailwind and Alpine.js and it was rather easy. I hope you enjoy looking at it! Feel free to leave a little red heart for my work, thanks! ❤️
DanielK• 440@DanK1368
Posted
Hi Byron, nice work. I uploaded the challenge the other day and for some reason when viewing the site on my cellphone I can scroll beyond the content. I have overflow set to hidden though. The same occurs when viewing the site in the browser using the responsive window and setting the touch simulation to enabled. When its disabled though, it works as intended. Hope you can have a look :) I used react and styled components for mine
0 - DanielK• 440
@DanK1368
Submitted
Hi guys, Since I'm practicing React as my first framework and recently familiarized myself with styled components I wanted to put that into practice with this challenge.
I'm hoping to hear some feedback on what I could have improved on/written more efficiently. :)
DanielK• 440@DanK1368
Posted
I also just realized, that when viewing the site on mobile you can scroll beyond the content ( right and down ) . I'm not sure why that is..
0 - Leonel Montiel• 40
@leonelmontiel
Submitted
I have not found a way to make the tips of the top edge of the cover image rounded. Any suggestions? Thanks!
DanielK• 440@DanK1368
Posted
Hi Leonel,
You have to apply the top borders to your illustration image.
border-radius: 10px 10px 0px 0px;Then it should work.Also to get rid of the Accessibility issues you have to wrap your content in a <main> tag. The order summary text should be an <h1> Tag.
Hope this helps a little.
Happy Coding
Marked as helpful
1 - Luis• 20
@lnaranjoc
Submitted
Hello Guys, This is my second challenge. I have been coding for about 3 months. At the beginning of this challenge I struggled with the layout. Then I found some info about CSS flex and decided to give it a go. It did the job I guess, although I didn't manage to complete the last part of the challenge as smoothly as I wanted. I mean the "stats" bit: I created two flex divs, as I understand two of them are necessary because numbers and text are to be styled in a different way. So I thought it'd be easier like this. The problem came when I had to align the margins (left margins) for both numbers and text. To get this done I had to manually change margins (h2's and h3's), and I wonder if there's a quicker and more efficient technique to align these numbers and text elements.
On the other hand I also struggled a bit with the fonts: for instance I had to reduce or increase the pixel size of some fonts to make the design closer to the solution. I don't know if this is OK, or I should have used different elements to display de text. In the style guide it says that the font size should be 15px, but if I applied that size, some text would be bolder than the solution, or bigger, or smaller... I would really appreciate any advice on this.
Finally, I didn't even try to get the responsive mobile version done. I checked the W3 Schools article https://www.w3schools.com/css/css3_flexbox_responsive.asp but it seems a bit complicated. I guess there's no easy way or shortcut to make the challenge responsive is it? Do you recommend any tutorial for beginners regarding this?
Thank you very much in advance for your feedback friends!
Luis
DanielK• 440@DanK1368
Posted
As stated above already, you need to make use of the flex-box properties such as justify-content, and align-items in combination with display: flex. By doing so, there's no need to to give all your different headings margins. I suggest you watch this recent video from Traversy Media on flexbox, you'll be more comfortable on using it afterwards. Flexbox video
0 - Lorenzo Franco• 480
@Lfrancos
Submitted
I'm really happy that I was able to create this : )
Since I started this journey, I've always been very intrigued by API. I still don't understand them in a deep way but hopefully by working more with them I'll be able to understand them better.
What I'm feeling right now is that an API is the documentation of the different links to the JSON files. (I may be really wrong)
If any of you has an easy way of putting what it is in an easy way, I would really appreciate it : )
Thank you!
DanielK• 440@DanK1368
Posted
Hi Lorenzo
Great work on this challenge. I've completed this one the other day too. Not sure if you tried to open it with firefox, but you will notice that it isn't working. It works just fine in chrome though. I've had a similar issue, and it turns out that the requests made to get an advice are being cached in firefox. So to get around that you add the following:
const data = await fetch(' https://api.adviceslip.com/advice', { cache: 'no-cache' } , );It should then also work in firefox. :)
Marked as helpful
0 - DanielK• 440
@DanK1368
Submitted
Hi guys, appreciate any comments or suggestions regarding either the HTML/SCSS or JS file. Anything that can be written better/more efficiently?
Also, for some reason if I run the site on Firefox and click the button it doesn't seem to update the advice after clicking the second time. In Chrome I can update it without any problems. Anything I am missing here?
Hope to hear from you. Thanks!! :)
DanielK• 440@DanK1368
Posted
So thanks to the Frontend Mentor community I was able to finally fix the problem in firefox. The site should be working as intended now :)
0 - LiBee• 390
@Li-Bee
Submitted
This is the first true responsive design I have done for desktop, tablet and mobile - so would appreciate opinions on what needs to be improved or best practice principles which need to be applied?
One thing i did not is the layout does look different on laptops - what is the usual breakpoint people use for laptop media queries?
All feedback welcome.
DanielK• 440@DanK1368
Posted
I just uploaded the same challenge this morning. It was fun, and i think you did a good job.
To get rid of the issues in the report you should update the alt attributes for the images in case they cannot be displayed.
I also noticed that when viewing your page on my mobile phone, the image of the host is almost gone. I would adjust the opacity of the overlaying color for the image to come out more.
I usually start around 960px to above 1000px to do the layout for the laptop. However, I think its generally better to adjust the layout as soon as there is enough space for the content to fit for the desktop version. Once the layout starts to look awkward as you grow the window you should add changes, i think it will make the overall transition look nicer too. :)
Marked as helpful
1 - Jesus Rebeitte• 110
@Rebeitte
Submitted
I have one question:
I learned that I can give a fixed font-size to the document html using Font-size: 62.5% to have 10px and use rems. However some people says that is not correct because the percentage is not the same for all browsers.
My doubt is: What is better to use, px or %?
DanielK• 440@DanK1368
Posted
Hey..i usually apply a font size of 62.5% for the whole project. It's just a bit easier to calculate as 1rem will equal to 10px. Without setting this percentage it will be 1rem=16px.
You generally want to avoid using px for setting widths and heights, as it will not be responsive to the size of the screen. Unless you really want it to be fixed then you can use px. It depends on what you want to achieve. :)
0 - Ngoc Tran• 40
@tranngocteam79
Submitted
Hi guys, Could you guy please take a look and give me some feedback? I have just learned HTML & CSS for 2 months.
DanielK• 440@DanK1368
Posted
It looks good :)
I have one suggestion. I would add a border-radius to the hover effect of the image, the same one that you applied to the image itself. It will look nicer.
Marked as helpful
1 - Mayank Agarwal• 70
@mayank-2323
Submitted
Hey how can I center the entire container vertically? I have centered it horizontally but cannot figure out vertically centering it.
DanielK• 440@DanK1368
Posted
Hey, good job on creating the site.
In order to get rid of HTML issue, you need to apply proper HTML5 semantics. Wrap your entire content in a main tag. You can also then apply the following to center everything:
main { display: grid; place-content: center; }
You also need to use an <H1> tag. Wrap your text in your .heading class in an <h1> tag, and it will solve the other issue. I also noticed that you do not wrap your other text within your div containers in any <p> tag. You should do that as well. It will assist the screen readers.
Hope this helps :)
1 - sdnitrogen• 30
@sdnitrogen
Submitted
My last challenge solution was using CSS Flexbox and this time I've used CSS Grid for this challenge as this layout seemed to be a nice one to implement inside grids. I didn't use grid-areas for this one which I'm still not very comfortable with using but will attempt to use it in my upcoming challenges. I've added an additional tablet layout between the mobile and desktop ones. Please let me know if you have any feedback or suggestions :)
DanielK• 440@DanK1368
Posted
Nice one. It's good to add a tablet version so the change from mobile to desktop is not too drastic. Good job :)
1 - DanielK• 440
@DanK1368
Submitted
Hoping to once again hear some feedback from the community regarding my solution. :)
DanielK• 440@DanK1368
Posted
I expected the HTML issue with the missing h1 tag to appear. What is the workaround in this case? Since all of the headings within the articles are the same, and there really isnt one main one for this page.
I also only noticed now, that there is a box-shadow around the components. Will be adding this one.
1
