@ahmed322
Submitted
is it better to use the image as an HTML element or make an element and give it a background image using CSS
@Danii215
@ahmed322
Submitted
is it better to use the image as an HTML element or make an element and give it a background image using CSS
@Danii215
Posted
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
@SalemDev0
Submitted
@Danii215
Posted
Hello, you probably want your button to redirect to "https://github.com/SalemDev0", instead of "https://salemdev0.github.io". Good job with your project :)
@Giodosvani
Submitted
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.
@Danii215
Posted
Great 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 helpful