@Sen-Nyin
@kondrei
Submitted
For this challenge I used <picture> tag to display different images: mobile and desktop version. It's seems to be difficult to work with this kind of tag: on iOS it does't display the image proportions and I saw a little margin at the bottom of image in desktop mode and I don't get it how to remove that. It was ok to use two div's with <img> tag and display only one regarding to screen resolution?
Thanks, and any other reviews will be welcome
@Sen-Nyin
Posted
Images always do seem to have a small margin by default. I usually have been able to remove that by setting the image to display: block;
Marked as helpful
@nkirukka
Submitted
How do I stop an element or a container from moving on page? Using "fixed" position does not seem to have any effect, in fact, none of the position properties have any effect and when I add any my footer moves up to the top of the page. I want the container to remain in the same position as window is resized.
And why does Frontend's screenshot skew things? The page looks good on my end but the screenshot here does not show the same thing I am seeing.
@Sen-Nyin
Posted
If I am understanding your question correctly, and you want your footer to appear at the top of the page, you want to set your <body> to position relative, and your <footer> to position absolute, with top: x. However, this is not great for accessibility - you'd be better off moving your footer content into a <header>. You can then set your header to position absolute, so that it's not pushing the rest of your content down.
Center everything else on the screen by using this on your <body>: min-height: 100vh; display: grid; and place-items: center;
Then put your content inside <main>. Your <main> should have no position setting.
As for the screenshot, I think there is an issue with the screenshot generation. I pay for pro and use the Figma files - I know all of my measurements are exact, however the screenshot is always slightly different to what I see.
@scoltelli27
Submitted
Beginner here. It was impossible for me to make the site responsive, I know how to make a site shrink or expand according to the viewport but I found no way of changing the site completely when the user is on mobile, like the exercise asks to do.
If anyone can please help me with that I would be extremely grateful.
@Sen-Nyin
Posted
The trick to having your flex box change for screen size is with your media query and having flex direction change from column to row, but keep up the good work it looks great
Marked as helpful
@Sen-Nyin
Submitted
Figma files don't match exactly how the preview images look - some text falls onto the next line in the Figma files while they don't in the design example.
@Sen-Nyin
Posted
The design comparison tool screenshot does not accurately show how the page loads in a browser. The comparison screenshot shows the text on my button breaking into 2 rows. This is not the case when loading my actual solution in a browser.
