@Arkadiusz-coder
Posted
Hello zHelga, that's nice looking page. I like very much that you have made possible to hide the "social media" section by clicking again on the arrow. Some people forget about providing this feature, and I think this is the best solution for user experience.
But I see that your mobile screen lacks a picture, and a picture on the desktop screen is not exactly of the proportions required for the challenge. Did you start your coding from the mobile screen? Because it's good practice in CSS and it is easier to change layout from mobile to desktop. I try it both way, so I know ;)
In your HTML you placed your .preview_img within the .preview class. It may be that this is the issue that make it hard to put image on the right place and result in the effect of disappearing of the image.
I resolve it in a way that my image is within class container like yours, but I hold the image within div that is separate from the rest of the component. I declare class "main" under the picture, and within .main I put the rest of the content. Thanks to that it wasn't problem for me to make the picture visible on top of the component.
The code is like that: ```````html`````
<div class="container"> <div class="drawer_image_container"> <picture> <img src="images/drawers.jpg" alt="" class="drawer_image"/> </picture> </div> <main class="main"> .... ``````````Although I suppose that if you will not make those changes according to above suggestion, but you will start your project from mobile, and then proceed to desktop, problem could also not occur.
Last but not least, to change the proportions of the picture I made width of the container smaller that that of the picture. Div in which I hold the picture has width property of 295px and the picture's width is 365px. In result the frame of the div covers some part of the picture and make visible only limited area of it. If you will do it, probably the rest of the component will change proportions and you will have to adjust it accordingly.
I hope that will be helpful. Good lack with this and future projects :)
Marked as helpful
