@rafdidact
@henrikkudesu
Submitted
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!
@rafdidact
Posted
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:
source elements inside of your picture element. You can just add the source of the image of the first layout your working on to the img element, and then add the remaining one in a source element to display only if it meets the condition you declare.You can check my solution for reference. Hope it helps.
Marked as helpful
@kartikp962
Submitted
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
@rafdidact
Posted
Hey, Kartik!
I got a few suggestions that would make your code even better:
@media rule.width: 100% and a cursor: pointer.You can check my solution for reference. Hope it helps.
@hanzala-bhutto
Submitted
Any feedback will be appreciated Thankyou!
@rafdidact
Posted
Hey, 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 your h1 and p elements inside of .contents.
You can check my solution for reference. Hope it helps.
Marked as helpful
@anggaanugrah
Submitted
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 🙏
@rafdidact
Posted
Hey, 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 a catch statement wrapping the code that should run if so.
You can check my solution for reference. Hope it helps.
Marked as helpful
@edward-hong
Submitted
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.
@rafdidact
Posted
Hey, 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 helpful
@charleseffiongjr
Submitted
@rafdidact
Posted
Hey, 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.
@Chanawin-kmpn
Submitted
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!
@rafdidact
Posted
Hey, Chanawin!
If you set the min-height of your body to 100vh and then center the elements in it with the method of your choice, I think you could get rid of the absolute 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 helpful
@sivakumars
Submitted
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.
@rafdidact
Posted
Hey, Siva!
img tag will do the job. It allows for an alt property, which you should use:<img src="image.svg" alt="cat">
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 helpful
@DavidPelo
Submitted
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!
@rafdidact
Posted
Hey, David!
I gave mine a solid 4px with the border-top property and then assigned each one their respective color with the border-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.
@dgarcia1724
Submitted
How to fix grid layout to match solution?
@rafdidact
Posted
Hey, 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 a div element that wraps them all four with a grid-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 helpful
@Muhammad-RK-Isa
Submitted
I didn't find much difficulties while building the project.
@rafdidact
Posted
Hey, 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 a span 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 helpful
@brian-maker
Submitted
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
@rafdidact
Posted
Hey, 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 a padding of 2rem for the mobile version, and 4rem 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 helpful
