Latest solutions
Latest comments
- @Duyen-codes@ohsite
HI Duyen! Please not that in this challange you have 2 images.
One for the desktop version and second one for the mobile. This fact can tell us that we are going to have to switch between those 2 pics.
You can not do that (without using JavaScript) by putting the img there by using an
<img>
tag. What you should do is: create and empty div in your markup code, than set the image as the background of this div by using:background-image: url(the div's url goes here), (color code goes here);
Now you have two images set as a background of the same div, first is image by using url, second one is a color, they should be separated by a comma.
Now you are able to use background blend modes to blend those two types of background.
Please also note that having image as a background set using css not putting it into the document by using an
<img>
tag allows you to switch desktop/mobile image using media queries.Keep up the good work!
- @ohsite@ohsite
Hi @pikamart, Thank you for your support! As for the body min-height that's exactly what I've been missing! Giving it just height on mobile the content would overlap top and bottom but stay centered. Really big thx for this solution. As for the footer I position it relative to take it out of the DOM order. Making it child of flex container therefore occupying some space in it, will make the second element not centered. Unless....I maybe give a footer margin top auto...yea that might work! As for the screen readers, semantic tags, and arias that is a definitely my weak side, that I have to work on more. If you be so kind please follow my future challanges and share your feedback! I've learned a lot from you. More than form few hours course! Thx again, peace <3
- @muubaraq@ohsite
Hi there, If you want to center main element: get rid of the
<section>
tag, it doesn't do anything. Also if you have attribution div, just make itfooter class="attribution"
. Style your body element to be a flex container and give it a height, like so:body { height: 100vh; display: flex; justify-content: center; align-content: center; position: relative; }
This way your body is a flex container with 2 children, main div and also footer element with the class of attribution. We gave it position relative, so now you cant give the footer position absolute which takes it out of the DOM, and you are left with perfectly centered main element.
As for the footer do bottom: 0; left 50% + transformX and you are good to go. If you have any questions feel free to ask. Also look my solution if you want to see the code, Keep up the good work!
- @klaudij@ohsite
Hi, The reason why you can not use border-radius properly is because, your rows are stacking. It's happening because of using bootstrap, try use custom media-queries instead. Check my solution, when screen is getting smaller they just shrink but not stack. In your case when you use border-radius on main element you will get to the point, when top if it is 2 cards and bottom of it is 1 card, so I'm guessing 2 top cards gonna have rounded corners, bottom one is not going to have those at all. Keep up the good work!
Marked as helpful - @htrigga28@ohsite
Hi there! Yes, image is not loading because you have to use:
background-image:
not justbackground
. Also instead of using::before
sudo element you can use multiple images as a background separated by,
and then use blend modes. Keep up the good work! - @michaeljohnson-mj@ohsite
Dear Michael, Honestly, given all types of screens and resolutions it's basically impossible to get a perfect match. On some challenges offset is used. For ex. to set two background images with offset I use:
background-image: url(image1), url(image2); background-position: -100px 0, calc(100% + 100px) calc(100% + 100px);
By using this trick 1st image will be top left corner -100px, 2nd bottom right +100px no matter the screen size.
Try to get a perfect match with order summary challenge using offset. Stay motivated!
Marked as helpful