Looking to hire developers?
@ondickson
@ondickson
Submitted
PLEASE NEED HELP!!!
i use my desktop screen and IPhone 12 pro max screen as my coding reference but when I'm done and checking how it looks on other screens. Everything falls apart. The text and images are at the right places its just not the same as the design in the project file anymore. Unless i turn the screen back to the aforementioned screens.
Please help, any solution to fix this?
@ondickson
Posted
Thanks for the feedback. I will try using chrome again, see how the next project would look like.
@Justlana13th
Submitted
this challenge is quite confusing for me. im unsure about the responsive design, but i think that's okay
@ondickson
Posted
Hi @Justlana13th 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉
background-color: hsl(204, 43%, 93%);
body {
font-family: 'Karla', sans-serif;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}```
Marked as helpful
@ErriGarcia
Submitted
Hi there! Please leave a comment below if you have any suggestions! Thank you so much!
@ondickson
Posted
Hi @ErriGarcia 👋, good job for completing this challenge and welcome to the Frontend Mentor Community! 🎉
.order-summary-background {
height: 100vh;
background-image: url(./images/pattern-background-mobile.svg);
background-repeat: no-repeat;
background-color: hsl(225, 100%, 94%);
background-size: contain;
display: flex;
justify-content: center;
align-items: center;
}
<div class="order-summary-background-plan">
<div class="newdiv">
<img class="order-summary-music-icon" src="images/icon-music.svg">
<div class="order-summary-description">
<h2 class="order-summary-h2-plan bold-text">Annual Plan</h2>
<p class="order-summary-price-plan desaturated-blue-color">$59.99/year</p>
</div>
</div>
<a class="order-summary-change-link bold-text">Change</a>
</div>
Then in your CSS you can add Justify-content: space-evenly;. Something like this
.order-summary-background-plan {
background-color: hsl(225, 100%, 98%);
display: flex;
align-items: center;
justify-content: space-evenly;
margin-top: 24px;
padding: 16px;
border-radius: 12px;
}
@WhiteFatal
Submitted
I don't think I have solved the background placing issue. Bubbles on background change positions when screen is resized. Please suggest your way of solving this. Thanks.
@ondickson
Posted
I think this is because your card is a little bit smaller. Anyway, I think your solution is very good. Try using this background-position and see if it fixes it
background-position: -2% -25rem, 100% 30rem;
@Raymacmillan
Submitted
Please help me as am not 100% certain of my code.Any suggestion on improvement will be highly appreciated
@ondickson
Posted
I think your code looks good. however, I noticed a problem with your box-shadow. In the design the box-shadow is only on Jeanette Harmon and Kira Whittle card. Here's a solution for that
Target Jeanette Harmon card in your CSS and add .jeanette { background: hsl(0, 0%, 100%); box-shadow: 40px 50px 50px -60px rgba(0,0,0,0.5); }
Target Kira Whittle card in your CSS and add .kira { background: hsl(0, 0%, 100%); box-shadow: 50px 100px 100px -80px rgba(0,0,0,0.4); }
The rest of the card doesn't need any box-shadow so you can remove any other box-shadow.
Marked as helpful
@Soulaima1
Submitted
All feedback are welcome thank you in advance
@ondickson
Posted
Here are some few bugs you need to fix
There's is a section element just under <body> in your html. You should delete that.
You can delete article element too. it's not really needed in this kind of project.
You put your <h1> element in <p> element. it should be something like
<h1>Gabrielle Essence Eau De Parfum </h1>
<p class="paragraph">A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.</p>
in your CSS
border: 0;
outline: 0;
text-decoration: none;
list-style: none;
you should always try to put these sort of specific code on the elements you want them to be on.
2.Before you begin each project, you must first read your style-guide. The style-guide in this challenge states that you use
Family: [Montserrat](https://fonts.google.com/specimen/Montserrat)
- Weights: 500, 700
- Family: [Fraunces](https://fonts.google.com/specimen/Fraunces)```
- Weights: 700
How to add these font to your project? watch this tutorial
There are so much more improvement to be made, you just need to continue learning.
Marked as helpful
@IrakliGvelesiani
Submitted
@ondickson
Posted
To fix the accessibility issues
also noticed there's no space between the p element and plan-box div/class you can solve that by adding margin-bottom to the p element in your css.
<main class="container"> <h2 class="title">Order Summary</h2> <h5>Annual Plan</h5> <p>$59.99/year</p> </main> </body>Marked as helpful
@MissSiriluck
Submitted
🐣My 3th Newbie(free) project: First time to try responsive by use <rem>. I'm still confuse 🤯. Please help to advise. Thank you for any feedback. 🌻 ✌️
@ondickson
Posted
Your solution is amazing. I'm learning from what you've done as well. Only one thing I noticed. That is when the solution is active, "Change" is still underlined. You can easily fixed this by add
.btn-change:hover { color: #766CF1; cursor: pointer; text-decoration: none; }
This will remove the underline when "Change" is hover on.
@ondickson
Submitted
Overall, I'm happy with how this turned out. I'm glad I could solve the issues in my previous challenges and actually be able to understand what each code does in the code.
I was finding it difficult to make my card size fit on the page without scrolling down or zooming out. After a night of watching tutorials, and listening to the feedback from my previous challenges. Everything became so clear and understandable.
PLEASE ANY SUGGESTION IS HIGHLY APPRECIATED. I'M LOVING THIS COMMUNITY AND THE HELP I'VE RECEIVED THROUGH YOUR FEEDBACK. Thank you
@ondickson
Posted
Thank you very much for the feedback. I will fix these issues right away.
Edit: I noticed all the minor details. got really excited and totally missed them all but I've fixed everything. I want to hear your feedback once again. That was very helpful.
@ondickson
Submitted
This was very simple and straightforward for me but I did have a minor issue concerning centering the Card component and also making sure the mobile view was accurate. I don't think I solve the mobile view but I'm taking a class on that right after this project. My next project hopefully won't have the same issue.
Any advice is very very welcome. Were there ways I could make my code readable and simple?
@ondickson
Posted
Thank you very much. I made the changes and it works and looks great :)
@mrodrigues14
Submitted
@ondickson
Posted
I think your preview card looks amazing. Please, how did you get your cart png image to horizontally align with "Add to Cart"? Also, I tried but couldn't get my preview card to be smaller and in the middle of the page. Any help will be very appreciated. Thank you
