@MirMurr
Posted
Hello Huy!
I like your solution! I have also completed this project and I really enjoyed working on it! I have some formatting tips for you:
-
Footer: I was struggling with the issue that the footer doesn´t stay on the bottom of the page. :) It is easy to solve: you can add position relative to the <main> HTML tag and set a min-width of 100vh. To the footer HTML tag you can add position absolute and bottom: 0 properties in CSS. This will place your footer to the bottom of the page and it won´t overlap the content above.
-
lightbox gallery: there are no arrows on the main image when I open the lightbox on laptop. This is a great resource on lightbox image gallery: https://www.w3schools.com/howto/howto_js_lightbox.asp
I hope it was helpful. :)
Best regards, Andrea
Marked as helpful
@huyphan2210
Posted
@MirMurr About the footer: what is your device's width? Is it a landscape or portrait device? I think the footer is doing ok. The parent element of the footer is the body element.
About the lightbox gallery, I didn't add the arrows on landscape devices. This was done on purpose. You can see the arrows when you use mobile or tablet devices.
Thank you for your reply. I'll take a look at it again later.
@MirMurr
Posted
@huyphan2210 The device width is 1280px (laptop). Oh, my mistake, it solves the issue if you apply position relative on body. Or you can use display flex on the body tag and flex-direction: column, then the footer will stick to the bottom. I have solved the footer issue with flexbox on this project.
@huyphan2210
Posted
@MirMurr Ok. After reviewing the page on some devices (with help from Chrome), I've made some adjustments:
- I've fixed the footer
- I've changed the width of the modal to get it fit on some landscape devices (I realized that it got too big on some devices which have width smaller than 1920px)
