the main container is overflowing how i can fix it .Somebody help.
KingSky
@KingSkyrosAll comments
- @AhmarIftikhar123Submitted about 1 year ago
- @teagir-amosSubmitted about 1 year ago@KingSkyrosPosted about 1 year ago
Hello, you did not align the text and some other things are not good :
body{ Text-align: Center; } img { max-width: 40%; ( Or more but should be bolder or bigger) } .container { border-radius: 2em; padding: Digit; }
I hope this was helpful π.
1 - @Et18nSubmitted about 1 year ago
I tried to get the image colour to change but failed to do so. Any feedback on it and otherwise is welcome.
Also for the grid that I used there were 3 columns instead of 2.Could anyone explain how that work?
Thank you for your help!!!
@KingSkyrosPosted about 1 year agoHello, would you like to try this?
img{ border-top-right-radius: 2%; border-bottom-right-radius: 2%; mix-blend-mode: multiply; }
Here's more info: https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
I hope this helps!π
Marked as helpful0 - @varunchennaSubmitted about 1 year ago@KingSkyrosPosted about 1 year ago
Hello, you forgot to add your background image here :
background: hsl(217, 54%, 11%);
and the text color for the
<p>
and the author 'Creation of' :Color: hsl(215, 51%, 70%);
and lastly you forgot to add hover to 'july wyven' :
a:hover { cursor: pointer; color: hsl(178, 100%, 50%); transition: 2s; }
Hope this was helpful π
0 - @malik-nSubmitted about 1 year ago@KingSkyrosPosted about 1 year ago
Hello, You forgot to add hover effects to the buttons. You can try using CSS code to achieve this.
Background-color: transparent; color: #fff; or use color: white; border: 2px solid white; }
and add the padding to all the divs cause the text is kind of packed up.
I hope this was helpful π.
Marked as helpful0 - @LucasrEvaristoSubmitted about 1 year ago@KingSkyrosPosted about 1 year ago
Use this for the background =
body{ background: hsl(212, 45%, 89%);
hope this is helpful π
Marked as helpful0 - @prmerguSubmitted about 1 year ago@KingSkyrosPosted about 1 year ago
Hello, This is a great outcome, but the spacing between
<p>
and<h1>
is too wide. Also, the icons should be slightly bigger.Hope this is helpful π
0 - @ArirockdevSubmitted about 1 year ago
Hi i here again. This is my solution for this challenge. I used html, and css (flex-box) for this version.
Thanks and happy codding
@KingSkyrosPosted about 1 year agoHello, @Arirockdev. You forgot to add hover effects to the buttons. You can try using CSS code to achieve this.
button: hover{ Background-color: transparent; color: #fff; or use color: white; border: 2px solid white; }
I hope this was helpful π.
Marked as helpful0 - @kerdainoSubmitted over 1 year ago@KingSkyrosPosted over 1 year ago
Hello, Well done on completing this project but you can add this to make it better:
background: hsl(212, 45%, 89%);
Hope it helps :D
0 - @arlagonixSubmitted over 2 years ago
- @thevolcanomanishereSubmitted over 2 years ago
Check out the animation when you add an item to cart, open the mobile menu, and opening the cart π
What did I find difficult?
I am still struggling to position the basket dropdown correctly as I resize the screen down to the mobile + tablet size.
Does anybody know why my product text is not rendered the same as the screenshot?
Most difficult element of this project was using relative positioning for parts of the lightbox and the basket. This was good because I haven't yet had this type of challenge so far. I now have a few examples I can look back on in this project.
I changed the lightbox around a little bit because I didn't like the UX of the lightbox presented :)
@KingSkyrosPosted over 1 year agoHi, this project looks awsome and well done on completing it. :)
1 - @KingSkyrosSubmitted about 2 years ago
what I found difficult was giving the image its color. But thanks to my slack friends I figured it out.