Angel Lopez• 160
@angelomarlopez
Submitted
When I update the current image (large) the image quality drops. What can I do about this?
Nathan
@Ayddan
All comments
- Nathan• 90
@Ayddan
Posted
Hi angelomarlopez,
Your image drop because it's not the same src for big images.
You have in the folder project, each image with two src.
In your js you are giving the src of the thumbnail that is clicked. But it should be the src without the thumbnail.
If you dont want to change all your code, you can just use a
myString.replace('-thumbnail','')on your src string that you are giving to the big image.If you need more dont hesitate
Hope it help
1 - TwixGamer00• 40
@TwixGamer00
Submitted
-
How should I do the footer on the mobile version? I couldn't get it done so I made 2 footers, 1 for desktop, and 1 for mobile. How can I place the footer at the bottom of the page without messing up the layout
-
All other feedback is also welcome, such as things I should do differently or things I did which should avoid doing
Nathan• 90@Ayddan
Posted
Hi TwixGamer00,
You struggle because your are using several parameters that are not usefull in your case
You footer
For your footer just remove the postion absolute and the transform
Your body
Your body have a
display: flex;so add aflex-direction: column;With that your component and your footer will display in one column
Your second footer
You can just remove it
Change the background color
For your mobile version just change the background color to white and it will to the trick
Ask if you need any precisions.
Hope it help
Marked as helpful
1 -
- Emmanuel Akpan• 790
@heisemmaco-dev
Submitted
I thank God for giving my the knowledge to complete my 5th frontend mentor project.
Secondly I have a little bit problem styling the <hr> tag to make it more tiny and the avatar image border also, I look forward to hear some anyone with the solution, thanks
Nathan• 90@Ayddan
Posted
Hi Moderateemmaco !
For your hr tag you have the default border of the hr. so just a
border: none;should be good to set the height as you wichFor the border of your avatar, is should be better to use a box-shadow with a spread and no blur. It's better for animations and will not squeeze your image.
Something like this should work :
box-shadow: 0 0 0 1px white;Box-shadow parameters are, position x and y, blur, spread and color.
Hope it help !
Marked as helpful
0 @sergioinsa
Submitted
A friendly challenge.
I have a lot to improve. I accept indications and suggestions. Thank you!
Nathan• 90@Ayddan
Posted
Hi Sergio !
Ive check your code to see if i can help you. First it looks great ! unless the background is not the same color as the design, it looks very cool !
Main tag
in your code you are using the main tag as your component .
The main tag should wrap the main content of the page, but not "be the main content".
I recomend to put your component into the main tag and wrap it with a div
<main> <div class="my-component"> <div> <img src="images/image-product-desktop.jpg" class="desk" alt="Image of chanel perfume bottle"> <img src="images/image-product-mobile.jpg" class="mob" alt="Image of chanel perfume bottle"> </div> <article> <p class="tag">PERFUME</p> <h1>Gabrielle Essence Eau De Parfum</h1> <p>A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p> <div class="price"> <h1 class="p-off">$149.99</h1> <p class="p-list">$169.99</p> </div> <a href="" class="btn"> <ul> <li><img src="images/icon-cart.svg" alt=""></li> <li>Add to Cart</li> </ul> </a> </article> </div> </main>H1 tags
You are using to many h1 tags in your html.
a page can only contain one h1 tag and it should contain something that clearly tell whats the page is about.
For example in this page, if you have only this component, your first h1 is good. you should not use h1 tags because its biger or have a different style.
List in your link
You have a link for the "Add to cart" button with a list in it.
You are using flex box on this list button you could have done the same with your link tank and have the same result. I dont think the list is usefull here.
<a href="#" class="btn"> <img src="images/icon-cart.svg" alt /> Add to cart </a>Hope it help
If you or someone have completions/feedbacks to say about my comment, feel free to make correct me.
Marked as helpful
0
