@ahmed322Submitted over 1 year ago
is it better to use the image as an HTML element or make an element and give it a background image using CSS
Danilo Movio
@Danii215All comments
- @Danii215Posted over 1 year ago
since the image is different for mobile and for desktop (responsive design), the better option would be a picture tag (which has an img inside it):
https://www.w3schools.com/tags/tag_picture.asp
other than that, this article probably can help you decide between an img and a background-image:
https://www.w3docs.com/snippets/html/when-to-use-html-img-tag-and-css-background-image-property.html
1 - @SalemDev0Submitted over 1 year ago
- I don't know why when I click dismiss button move me to GitHub note found page it should return me to main page (that's only in Github live site), if anyone can tell me the solution that’s will help me and Thank you.
@Danii215Posted over 1 year agoHello, you probably want your button to redirect to "https://github.com/SalemDev0", instead of "https://salemdev0.github.io". Good job with your project :)
0 - @GiodosvaniSubmitted over 1 year ago
i'm having some trouble to make it responsible on mobile devices. Using the inspector from browser, on some greater height-pixel devices, like Iphone XR (414px), there is a "border" on top and bottom. Lesser than 414px looks good on most of then.
@Danii215Posted over 1 year agoGreat job with your project! The reason you're having a "border" on top and bottom of some smaller screens is because your container has min-height. Removing this property from .container will remove the top border. To fill the remaining space at the bottom, your <body> tag should have a height of 100vh, to fulfill the whole screen's height available, set the display to flex, flex-flow (or flex-direction): column, and then set your <footer> to height: 100%. This makes the <body> a flex container and each element inside of the <body> will be placed in a column. By setting the footer's height to 100%, the footer will try to fill as much space as it can, thus filling the "border" on the bottom. You can then centralize the text in the footer with line-height: 1.7rem. Remember to do all these fixes within your preferable @media query size.
Marked as helpful0
