The challenge was not so difficult to achieve, as long as one person mastered the CSS GRID. I wish if you have a wink on my site, kindly leave me your comments please
Tee
@thulanigamteeAll comments
- @Tfk-teckSubmitted over 1 year ago@thulanigamteePosted over 1 year ago
Congrats on completing the solution
Overall site is nice, mobile view is also good. One thing you should take into consideration is to fix the layout once you past the mobile view. At 366> it doesn't look good as it's already getting changed to desktop layout. Try to maybe incorporate a middle layout to make the transition between different screen sizes a little bit better.
Once the screen gets big enough everything goes back to looking good, but everything goes bad once the screen gets too big. You should put a
max-width
on each container to avoid it getting stretched out on big screens.0 - @kennsawyerrSubmitted over 1 year ago
HI guys. Pls I do not know how to change the colors of a mockup image like the logo at the footer section .I really would value help on that. Also pls go through my code and give me reviews. I would appreciate the insights.Thanks
@thulanigamteePosted over 1 year agoCongrats on completing the challenge
You seem to have done a good job with the solution, but on mobile there seems to be some issues, like the mobile menu button not working, at least on my side. I think you should focus on getting the solution to look good on every screen size.
And to change the logo, of which I believe it's an svg, you should make the copy of the svg and edit it to the color you want for the footer.
Hope that helps.
0 - @DiegoPasayeSubmitted almost 2 years ago
Hi guys, this is my solution using React for the first time but i have 2 problems, in the mobile design, i try to add a element.classlist.toggle for show the mobile menu, but when i do this i have a error, and second, i cant move the background in the image, if any one can help me i really appreciate this, thankyou, happy coding!
@thulanigamteePosted almost 2 years agoTo fix the functionality for the mobile menu, remove;
const mobileContainer = document.querySelector(".mobileContainer") const [visible, setVisible] = useState(false) const mostrar = () =>{ if(visible == false){ mobileContainer.style.visibility = "visible" setVisible(visible = true) }else{ mobileContainer.style.visibility = "hidden" setVisible(visible = false) } }
I don't think you need that, replace it with this;
const mostrar = () => { document.querySelector(".mobileContainer").classList.toggle("active"); }
Then on your css, I removed visibility, and used
display:none
, then toggled it, like this;.mobileContainer { display: none; } .mobileContainer.active { display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; min-height: 40vh; width: 80%; margin-left: 10%; position: fixed; background-color: white; box-shadow: 0 0 20px -5px black; border-radius: 5px; }
That seemed to do the trick, and I am not sure what mostrar is, when naming your functions or anything for that matter try using descriptive words, rather than mostrar, something like
toggleMobileMenu
for the function would have been way better, because that is what it does, it toggles the mobile menu.Marked as helpful0 - @MthoNtanziSubmitted almost 2 years ago
I just completed my first challenge... please let me know what you think
@thulanigamteePosted almost 2 years agoCongratulations on completing your first challenge.
The text on the design comparison is centered rather than aligned to the left, try
text-align: center
, and it should fix that. When writing your HTML try to use landmarks, rather than using divs all the time.And I think it is better to have your css on a separate file from your html.
0