DayaA• 100
@Aishaakin
Submitted
Hi everyone, i tried using media query property but i can get it to meet the project challenge. Can someone please help me.
Fritz
@fritzadelbertus
All comments
- Fritz• 300
@fritzadelbertus
Posted
Hello @Aishaakin. First of all, congratulations on finishing this challenge!
Here are some few suggestion I can give:
-
I think w3schools explanation of media queries is easy to digest. I recommend you to start learning media query from there. You can visit their documentation here
-
I see you haven't use the
<picture>tag. The<picture>tag helps you display different image source for different medias. You can see how to implement it here. It will make you easier to apply responsive images.
I hope it's helpful and happy coding!
0 -
- Reza Jaber• 200
@rezajaber
Submitted
Hey! I am Reza 🙂 I just recently started to learn web-development and would like to get every little help out there. So if you have the time, feel free to look over my project/projects and give me some advice to get better as fast as possible.
Third Project: Some questions for this "nft-card" project:
- I just can not figure a way to put this blue-color, when I hover over. Please help :)
- Is my "Index.html" well structured?
- Did I center everything right, or was there a easier way?
- What did I do completely wrong, and just have luck within this project?
I appreciate it✌️
Fritz• 300@fritzadelbertus
Posted
Hello @rezajaber. First of all, congratulations on finishing this challenge!
Here are some few suggestion I can give:
- For the hover effect you can add an additional overlay in front of the image and change the opacity during hover. I use a
<div>containing the eye icon for the overlay. You can see how I implement the styles here in the /* Hover Effect */ section - The index.html structure is clean. The card content could be wrap in an
<article>tag to create a cleaner structure but the current structure is already good. - The layout is good. Although I prefer using flexbox for 1 dimension layout, grid is also a good solution.
- There are no 'unusual sightings' in your code. At least in the index.html and styles.css file so it's fine in my opinion.
I hope it's helpful and happy coding!
Marked as helpful
0 - Ric• 210
@Ripra87
Submitted
I started this challenge thinking was easy, but it wasn't :P i learnt many new attributes coding this page ) Btw, i have 2 questions: First, again, about the round borders.. (my nightmare!). As you can clearly see from the button (but i have the same problem on all the round borders) the round borders are not round, at the sides there are a kind of "cut" that doesn't allow to complete the radius, and i really don't know how to fix it.. Second, to easily manage the text style in the button , i add inside the button tag the paragraph tag (<button><p> text </p></button>) but doing this i lost the pressure characteristic typical of the button when you press it. I did this because using only the button tag i wasn't able to change the text style (as color and font), anybody knows how to do it? Thanks everybody in advance! )
Fritz• 300@fritzadelbertus
Posted
Hello @Ripra87. First of all, congratulations on finishing this challenge! Here are some few suggestion I can give:
-
The rounded border problem, to implement better rounded border use units in pixel. Using percentage in
border-radiusis useful to create ellipse looking element but not recommended to create rounded borders. try changing theborder-radius:10%toborder-radius:20px, it should solve that problem. -
I see your css styles haven't implement
display: flexordisplay: gridyet. I recommend you start using them. Margin and padding is useful to create spaces between element but flexbox and grid are powerful tools to create complex layouts.
I hope it's helpful and happy coding!
Marked as helpful
0 -
@devgobind
Submitted
Mobile First -> Desktop Used background-image property to control the image size. Need to learn how to control the size of image using <img> without distorting the image
Please share the feedback it is much appreciated
Fritz• 300@fritzadelbertus
Posted
Hello @devgobind. First of all, congratulations on finishing this challenge!
Here are some few suggestion I can give:
- Using
<picture>tag is a better practice in this challenge where the image source change according to the screen width. See this on how to use it. - The
<h1>tag is used for the main header of the document so I suggest changing the
<div class="price btm-pad"> <h1 class="d_price">$149.99</h1> <p class="o_price">$169.99</p> </div>to something simpler like this:
<p class="price">$149.99<span class="o_price">$169.99</span><p>I hope it's helpful and happy coding!
Marked as helpful
1- Using
- Shun.P• 50
@Shun-planet
Submitted
-
How do you arrange your elements base on the screen sizes you want (i.e desktop view and mobile view)?
-
why is my web page responding to the browser zoom on desktop but not on mobile?
Thanks for the feedbacks and advice. They helped a lot to make this correction. More feedback to improve my work will be appreciated. Thanks and happy coding.
Fritz• 300@fritzadelbertus
Posted
Hello @Shun-planet. First of all, congratulations on finishing this challenge!
Here are some few suggestion I can give:
- Using
<picture>tag is a better practice in this challenge where the image source change according to the screen width. - Learn how to use flexbox or grid or both. These two provide simple ways to arrange your elements. Here is a link that will help you understand how to arrange elements properly. After learning it, you can easily apply different arrangements based on the media queries.
I hope it's helpful and happy coding!
Marked as helpful
0 -
- Abieb_Guardian• 200
@AbibGuardian50
Submitted
It is so difficult for me to set position items and make the web to be responsive,is there any practice or course that you would recommend for me? Thank you and have a good day.
Fritz• 300@fritzadelbertus
Posted
Hello @AbibGuardian50. First of all, congratulations on finishing this challenge!
I'm also a newbie but here are some suggestion I can give:
- Using
<picture>tag is a better practice in this challenge where the image source change according to the screen width. - I recommend using semantic HTML such as
<main>to wrap up the main content. - The spacing in PERFUME can be easily modified in css using the
letter-spacingproperty
To get a better grasp in creating layouts and position items I recommend understanding the box model (padding & margins) as well as how to use flexbox. W3Schools also provide clear documentation to learn basic CSS
I hope it's helpful and happy coding!
Marked as helpful
0 - Using
- LarryTheFatCat• 50
@LarryTheFatCat
Submitted
Resubmitting, I have no idea why the image broke lol
Fritz• 300@fritzadelbertus
Posted
Hello @twothreetwo. First of all, congratulations on finishing this challenge! If you still have trouble loading the image I recommend changing the src attribute of the image into something like this:
src="./images/image-qr-code.png"I also recommend understanding the box model (margin, padding, border) and flexbox to create layouts.
I hope it's helpful and happy coding!
Marked as helpful
1
