@Sameermd16Submitted almost 2 years ago
I was confused whether to use flex box or grid for the project. I went with the flex box model.
Jerome Dela Cruz
@noonecaresman023All comments
- @noonecaresman023Posted almost 2 years ago
Hi, Sameer! I would generally avoid using too many divs and vague container names for practice try to use other semantic html elements too and specific name for classes. Here's a resource that made me understand which one to use in a scenario: https://www.youtube.com/watch?v=3elGSZSWTbM&ab_channel=KevinPowell Also, as my general rule: I use flexbox for 1 dimension and grid for 2 dimensional. Your work looks great! Happy Coding!
0 - @nexsalvarezSubmitted almost 2 years ago
What other solution do you have to place the background images?
@noonecaresman023Posted almost 2 years agoHi! Try to place your background on to the body tag and have it no-repeat and a background-size of cover. Also, I noticed that you may have coded your solution in Firefox browser because whenever I try to view your solution on Edge or Chrome, your footer is cutoff try to remove the overflow: hidden; and find a suitable solution that meets your expectation without it not working on other browsers. Let me know if you have more questions! Happy coding!
Marked as helpful0 - @maaxgSubmitted almost 2 years ago
- I felt confused about the responsivity of each element and the component in general, there is any way to do it better than media queries?
- There any CSS best practices that I could follow?
@noonecaresman023Posted almost 2 years agoI would say use minmax() property, but I would advise you to understand media queries as they are still, in my opinion, the best way to do it. I noticed that you styled each h tags, try to avoid in doing so, instead take a look at the design first and check the similarities each element has, e.g your h5 and p has the same font that could've been shorten into one code. Use em, rem, % instead of px for responsiveness. Regarding h tags, use them in order so use h1 first then use h2, I'd avoid having an h1 then using h4. You're on the right track, I'd suggest take a look at the design first, note down what you can tackle in one code, search up on google of what you don't know. Keep up the good work and happy coding! Lmk, if you have any more question.
Marked as helpful1 - @simonmatt89Submitted almost 2 years ago
I found it very difficult to create a mobile version of this site. I have also noticed that the live site is displaying a 404 error for the images.
I'm still wrapping my head around github and uploading files.
@noonecaresman023Posted almost 2 years agoHi! Regarding your problem that your images is not showing up, include your image/s when uploading them to github and reference your image path accordingly since right now your images are stored within your documents folder but github wouldn't know where that is as it is not included in the uploaded file. Also, I advise you to take a look at semantic html element for better readability, as to avoid using divs. I also noticed that you used h tags incorrectly, so, generally, if you are using h tags, use them in order, I'd avoid in using h4 without using h3 first (Note: use h1 tags once). If you are having difficulty creating a mobile version of this site, might I suggest you create mobile design first then go to desktop version. Let me know if you have more questions! Happy coding!
Marked as helpful1 - @gt78xSubmitted almost 2 years ago
How do I prevent the footer from hovering on other elements on small screen size?
@noonecaresman023Posted almost 2 years agoLooking over your html, mainly your footer, since you already used the footer element you don't have to put a div inside the footer you can just put p element or a tag element. To fix your problem, your body tag should look like: body{ min-height: 100vh; position: relative;} then styling your footer would be footer{position: absolute; top: 100%; bottom: 0;} it should hopefully solve your problem. I'd advise you to use semantic html instead of using divs for better readability and delete the footer style inside your html and instead put it in your css file.
0 - @AliMahmoud21Submitted almost 2 years ago
Hi Guys! I don't know how to make the background color on the photo so I'm asking if there's anyone who can help me.
Ok I Made It.
@noonecaresman023Posted almost 2 years agoHi, try using background: url() css property and play around with it and see if it would solve your problem. Start with this <div class="img"> <div class="img-color-overlay"></div> </div> then use background: url() property inside the .img then do the same for img-color-overlay but with a color. Looks great!
Marked as helpful1 - @WebdevsonuSubmitted almost 2 years ago
Here I did mobile first design, which was easy to change using media query for desktop design. But as I am still new to media queries I having some doubt that when to use min-width and when to use max-width and during reducing the width of the page I found some overflow of contents which was giving scroll bar, how to fix that any ideas. The main difficulty for me was to change the image color to slightly purple (or given color). As I tried using filter-hue rotate but It was not applied to the already black and white image. Any Ideas how to do it easy way.
@noonecaresman023Posted almost 2 years agoHello, what you can try to do is use background: url(./path) property so instead of having a <img> element you would have a div element which is going to be like <div class="img"><div class="color-overlay"></div></div>. Try to play around with it as it I think it gives you more freedom in manipulating images. Instead of having some of your css design property have a value of auto, try setting them with either rem, em or px. My other advice would be to use less divs in the future and use semantic html elements and for me at least, I try to avoid styles inside my html file, but I think for your case it works better. Good job!
Marked as helpful0
