HTML part was easy. The problem started when i decided to make desktop version first. The CSS Code is a mess and incomplete; note that i need to add an overlay over the image, but i couldn't make it. Any help is welcome!
Adán Estévez
@rafdidactAll comments
- @henrikkudesuSubmitted almost 2 years ago@rafdidactPosted almost 2 years ago
Hey, Leonardo! I did the same as @chicaboom-73 for the overlay, you should check that documentation out.
I see you're almost there, but I got a suggestion that would make your code even better:
- There's no need for two
source
elements inside of yourpicture
element. You can just add the source of the image of the first layout your working on to theimg
element, and then add the remaining one in asource
element to display only if it meets the condition you declare.
You can check my solution for reference. Hope it helps.
Marked as helpful1 - There's no need for two
- @kartikp962Submitted almost 2 years ago
Please give your valuable feedbacks. I was stuck on project to make image and text part to make it in half of the screen. tell me how can i make it easily. And also the alignment is not proper so please also let me know your suggestions to correct it
@rafdidactPosted almost 2 years agoHey, Kartik!
I got a few suggestions that would make your code even better:
- Your layout should be responsive. This means the components of your design should be properly reorganized depending on the width of the device your viewing it from. When I switch to mobile view, your design stays the same. You can make your CSS automatically apply new styles depending on the width of the device your viewing it from with a
@media
rule. - Your button should take all the width available and change cursor to pointer when hovering. You can achieve this with a
width: 100%
and acursor: pointer
.
You can check my solution for reference. Hope it helps.
2 - Your layout should be responsive. This means the components of your design should be properly reorganized depending on the width of the device your viewing it from. When I switch to mobile view, your design stays the same. You can make your CSS automatically apply new styles depending on the width of the device your viewing it from with a
- @hanzala-bhuttoSubmitted almost 2 years ago
Any feedback will be appreciated Thankyou!
@rafdidactPosted almost 2 years agoHey, Hanzala!
I got a few suggestions that would make your code even better:
-
I can't see the font family this design's supposed to be applied. If you don't know what I'm talking about, check the
style-guide.md
file in this challenge's folder. -
When on a desktop view, the text inside your modal should be aligned to the left. You can achieve this by applying
text-align: left
to yourh1
andp
elements inside of.contents
.
You can check my solution for reference. Hope it helps.
Marked as helpful1 -
- @anggaanugrahSubmitted almost 2 years ago
Hello guys, here is my solution for the Interactive Rating Component Challenge. Let me know if you like it or have better ideas for me to write much better & efficient code. Please help me to improve my skills by giving your feedback. Thanks 🙏
@rafdidactPosted almost 2 years agoHey, Angga!
I like your JavaScript, maybe even more than mine. It's very clean, but there's a common user error you have to catch.
If the user doesn't select any rating and then clicks submit, the form is submitted and the thank you message is presented without a rating. This should not happen.
In my code, this throws an error to the console. I catch it with a
try
statement wrapping the code that might break and acatch
statement wrapping the code that should run if so.You can check my solution for reference. Hope it helps.
Marked as helpful1 - @edward-hongSubmitted almost 2 years ago
I'm not 100% sure that the colours I used were correct. It seems that more shades of the blue gray colours were needed that the ones specified by the style guide. Feedback on this would be much appreciated.
@rafdidactPosted almost 2 years agoHey, Edward!
Your rating options should get selected when you click on them, not immediately submit the rating given. You can look at my code for reference.
Now, about the colors, I actually have the same problem with this challenge. It might be a problem of the starter code folder or we might both be wrong lol. Let me know if you find the right approach to this.
Marked as helpful1 - @charleseffiongjrSubmitted almost 2 years ago
- I thought about using the css grid but it dint work despite having to code in the bootstrap link and script.
- What could i have done to get the white background color over the papaywhip? I found that to be really difficult.
- Is there a way i could have coded this without bootstrap? even though i did all that without bootstrap.
@rafdidactPosted almost 2 years agoHey, Charles!
Bootstrap doesn't allow for much customization of the styles being applied to your HTML, which has a reason to be, but sucks in cases like this. I suggest you to look at other people's approach to this challenge and try to solve it with CSS.
You can start with my code. Hope it helps.
0 - @Chanawin-kmpnSubmitted almost 2 years ago
In this project I added page flip feature and rate press detection that it is pressed or not, then a notification will be alert. Since I've done all the projects, I think my biggest issue is centering the page. I'm always confused by the width and height dimensions of pages and containers. If anyone can give me some advice. I will be very grateful Thank you!
@rafdidactPosted almost 2 years agoHey, Chanawin!
If you set the
min-height
of your body to100vh
and then center the elements in it with the method of your choice, I think you could get rid of theabsolute
positioning in your attribution and get a nice layout.Your container doesn't need to be right in the center of the page, like the design shows. If yours has an attribution element then your layout should be different.
Edit:
You can check my code for reference. Hope it helps.
Marked as helpful0 - @sivakumarsSubmitted almost 2 years ago
Hi all,
Learning a bit about SVG files and their usage, I have used SVG sprites for this challenge. Please give me feedback if I have used it correctly.
@rafdidactPosted almost 2 years agoHey, Siva!
- If your svg takes the role of an static image, an
img
tag will do the job. It allows for analt
property, which you should use:
<img src="image.svg" alt="cat">
- If you want a more powerful svg, use
object
. It allows for referring your svg from outer document, so that you can manipulate it with JavaScript:
<object id="svg1" data="image.svg" type="image/svg+xml"></object>
Hope it helps.
Marked as helpful1 - If your svg takes the role of an static image, an
- @DavidPeloSubmitted almost 2 years ago
Fun challenge! I felt pretty confident setting up the layout and styles.
One thing I'm curious how others would go about doing is the top border of the feature cards. I found a solution using a container with extra padding and color for each card. Let me know how you did it!
@rafdidactPosted almost 2 years agoHey, David!
I gave mine a solid 4px with the
border-top
property and then assigned each one their respective color with theborder-color
property, like so:.modal { padding: 1rem; margin: 1rem; border-top: solid 4px; border-radius: 4px; overflow: auto; } .modal.light-blue { border-color: var(--cyan); } .modal.red { border-color: var(--red); } .modal.yellow { border-color: var(--orange); } .modal.blue { border-color: var(--blue); }
You can also check my solution's code for reference. Hope it helps.
0 - @dgarcia1724Submitted almost 2 years ago
How to fix grid layout to match solution?
@rafdidactPosted almost 2 years agoHey, Daniel!
You could use Grid CSS to achieve this type of layout. Assign a
grid-area
to each one of your modals and then specify their position in adiv
element that wraps them all four with agrid-template-areas
property. Use dots for spaces.Like so:
.modal-wrapper { grid-template-areas: ". b ." "a b d" "a c d" ". c ."; } .modal.light-blue { grid-area: a; } .modal.red { grid-area: b; } .modal.yellow { grid-area: c; } .modal.blue { grid-area: d; }
You can also check my solution's code for reference. Hope it helps.
Marked as helpful2 - @Muhammad-RK-IsaSubmitted almost 2 years ago
I didn't find much difficulties while building the project.
@rafdidactPosted almost 2 years agoHey, Muhammad! I got a few suggestions that would make your solution even better.
-
Your button should have a property of
cursor: pointer
so that when you hover over it with your cursor, the cursor icon changes. This will help the user get the feeling the item being hovered on is clickable. -
The shopping cart icon in the button is not visible. You should call its svg file path with a
img
tag wrapped inside aspan
tag, to better style it.
You can check my solution's repository for this challenge for reference.
Feel free to reach out if you need help!
Marked as helpful0 -
- @brian-makerSubmitted almost 2 years ago
should i set the height for the whole card or i can set the height for each and every small card while in mobile format
@rafdidactPosted almost 2 years agoHey, Brian! I got a few suggestions that would make your solution even better.
-
You should add a
padding
to each one of the sections inside of your card. In my solution for this challenge, I gave each section apadding
of2rem
for the mobile version, and4rem
for the desktop version. You can check the code visiting my repository. -
Your card component and your button should have a
box-shadow
property matching the shadow effect they have in the design. Again, you can check my repository for reference.
Feel free to reach out if you need help!
Marked as helpful0 -