
DanielK
@DanK1368All comments
- @blameleo@DanK1368
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.
- @byronbyron@DanK1368
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
- @DanK1368@DanK1368
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..
- @leonelmontiel@DanK1368
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 - @thefolake@DanK1368
Nice one, it is also responsive.
I would suggest adding a box shadow on the sign up button to make it stand out more. You should also add the hover state for that, to make it more interactive.
- @lnaranjoc@DanK1368
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
- @Lfrancos@DanK1368
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 - @DanK1368@DanK1368
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 :)
- @Li-Bee@DanK1368
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 - @Rebeitte@DanK1368
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. :)
- @tranngocteam79@DanK1368
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 - @mayank-2323@DanK1368
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 :)
- @sdnitrogen@DanK1368
Nice one. It's good to add a tablet version so the change from mobile to desktop is not too drastic. Good job :)
- @DanK1368@DanK1368
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.