@Wijdane29Submitted about 1 year ago
Rahul Kumar Ravi
@its-rkraviAll comments
- @its-rkraviPosted about 1 year ago
Congratulation @Wijdane29 for completing the challenge.
welcome to the frontend mentor platform your design looks good it is almost similar to the actual design. but you need to do some changes in your style.css file.
Problem : you design is not responsive for small screen.
Solution : In the style.css file select the class with (.main) and instead of width you need to use max-width so that your component looks responsive for small screen.
.main { max-width: 375px; }keep up the excellent work , and if you have any further questions and need any assistance with anything , feel free to ask.
Mail : [email protected]
Instagram : its_rkravi
together we continue to build a supportive and knowledgeable community.
Best Regards , Rahul Kumar Ravi
0 - @KkkiiiirranSubmitted over 1 year ago@its-rkraviPosted over 1 year ago
Congratulations @Kkkiiiirran for completing the challenge.
Welcome to the Frontend Mentor Platform. your design looks good It is almost similar to the actual design. But you need to do some changes in your style.css file.
1. First of all your github repo link not working. so please update it. ☹️
2. go inside html file and a div with classname (.flexgroup) keep ( ringtune icon svg and the div which have plan and price) keep all these in one div and the (anchor link with class (.change) keep it seprate. how to do this is given below.
<div class="flexgroup subscription"> <div class="sub-container"> <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"> <g fill="none" fill-rule="evenodd"> <circle cx="24" cy="24" r="24" fill="#DFE6FB"/> <path fill="#717FA6" fill-rule="nonzero" d="M32.574 15.198a.81.81 0 00-.646-.19L20.581 16.63a.81.81 0 00-.696.803V26.934a3.232 3.232 0 00-1.632-.44A3.257 3.257 0 0015 29.747 3.257 3.257 0 0018.253 33a3.257 3.257 0 003.253-3.253v-8.37l9.726-1.39v5.327a3.232 3.232 0 00-1.631-.441 3.257 3.257 0 00-3.254 3.253 3.257 3.257 0 003.254 3.253 3.257 3.257 0 003.253-3.253V15.81a.81.81 0 00-.28-.613z"/> </g> </svg> <div> <h2 class="plan">Annual Plan</h2> <p class="price">$59.99/year</p> </div> </div> <a href="#" class="changelink">Change</a> </div>3. update one CSS property in the in the div which have a class name (.main-component) just change width to max-width:28rem or whatever width you want. now your design is responsive for small screens also.
.main-component{ max-width:28rem; }Instead of this everything looks fine.
"Best of Luck for future Design"
Few Tips:
Use more modern and flexible techniques like Flexbox or Grid for layout purposes. These CSS features are designed to make web development easier, more maintainable, and responsive across various devices.
Keep up the excellent work, and if you have any further questions or need assistance with anything, feel free to ask.
Mail: [email protected]
Instagram : its_rkravi
Together, we can continue to build a supportive and knowledgeable community.
Best regards, Rahul Kumar Ravi
Happy Coding!
Marked as helpful0 - @Gehad799Submitted over 1 year ago@its-rkraviPosted over 1 year ago
Congratulations @Gehad799 for completing the challenge.
Welcome to the Frontend Mentor Platform. your design looks good It is almost similar to the actual design. keep doing and become better and better everyday in frontend design component.
Best of Luck || Never Give UP || Work Harder
Few Tips:
Use more modern and flexible techniques like Flexbox or Grid for layout purposes. These CSS features are designed to make web development easier, more maintainable, and responsive across various devices.
Keep up the excellent work, and if you have any further questions or need assistance with anything, feel free to ask.
Mail: [email protected]
Instagram : its_rkravi
Together, we can continue to build a supportive and knowledgeable community.
Best regards, Rahul Kumar Ravi
Happy Coding!
Marked as helpful0 - @Dev-Lucas-SilvaSubmitted over 1 year ago@its-rkraviPosted over 1 year ago
Congratulations @Dev-Lucas-Silva for completing the challenge.
Welcome to the Frontend Mentor Platform. your design looks good It is almost similar to the actual design. keep doing and become better and better everyday in frontend design component.
Just do these two changes in style.css file.
.container{ max-width:900px; }main{ padding:2rem; }otherwise everything looks good.
Best of Luck || Never Give UP || Work Harder
Few Tips:
Use more modern and flexible techniques like Flexbox or Grid for layout purposes. These CSS features are designed to make web development easier, more maintainable, and responsive across various devices.
Keep up the excellent work, and if you have any further questions or need assistance with anything, feel free to ask.
Mail: [email protected]
Instagram : its_rkravi
Together, we can continue to build a supportive and knowledgeable community.
Best regards, Rahul Kumar Ravi
Happy Coding!
0 - @lamis-menghourSubmitted over 1 year ago@its-rkraviPosted over 1 year ago
Congratulations @lamis-menghour for completing the challenge.
Welcome to the Frontend Mentor Platform. your design looks good It is almost similar to the actual design. keep doing and become better and better everyday in frontend design component.
Best of Luck || Never Give UP || Work Harder
Few Tips:
Use more modern and flexible techniques like Flexbox or Grid for layout purposes. These CSS features are designed to make web development easier, more maintainable, and responsive across various devices.
Keep up the excellent work, and if you have any further questions or need assistance with anything, feel free to ask.
Mail: [email protected]
Instagram : its_rkravi
Together, we can continue to build a supportive and knowledgeable community.
Best regards, Rahul Kumar Ravi
Happy Coding!
0 - @juliarainaSubmitted over 1 year ago@its-rkraviPosted over 1 year ago
Congratulations @juliaraina for completing the challenge.
Welcome to the Frontend Mentor Platform. your design looks good It is almost similar to the actual design. keep doing and become better and better everyday in frontend design component.
Best of Luck || Never Give UP || Work Harder
Few Tips:
Use more modern and flexible techniques like Flexbox or Grid for layout purposes. These CSS features are designed to make web development easier, more maintainable, and responsive across various devices.
Keep up the excellent work, and if you have any further questions or need assistance with anything, feel free to ask.
Mail: [email protected]
Instagram : its_rkravi
Together, we can continue to build a supportive and knowledgeable community.
Best regards, Rahul Kumar Ravi
Happy Coding!
1 - @y0-geshSubmitted over 1 year ago@its-rkraviPosted over 1 year ago
Congratulations @y0-gesh for completing the challenge.
Welcome to the Frontend Mentor Platform. your design looks good It is almost similar to the actual design. keep doing and become better and better everyday in frontend design component.
in style.css file give these two properties to the parent container. I think it looks better.
.parent { max-width: 1440px; margin: 0 auto; }Best of Luck || Never Give UP || Work Harder
Few Tips:
Use more modern and flexible techniques like Flexbox or Grid for layout purposes. These CSS features are designed to make web development easier, more maintainable, and responsive across various devices.
Keep up the excellent work, and if you have any further questions or need assistance with anything, feel free to ask.
Mail: [email protected]
Instagram : its_rkravi
Together, we can continue to build a supportive and knowledgeable community.
Best regards, Rahul Kumar Ravi
Happy Coding!
0 - @milindkusahuSubmitted over 1 year ago
I have found difficulty with adjusting height and width I am sure of my solution No
@its-rkraviPosted over 1 year agoCongratulations @milindkusahu for completing the challenge.
Welcome to the Frontend Mentor Platform. your design looks good It is almost similar to the actual design. keep doing and become better and better everyday in frontend design component.
Best of Luck || Never Give UP || Work Harder
Few Tips:
Use more modern and flexible techniques like Flexbox or Grid for layout purposes. These CSS features are designed to make web development easier, more maintainable, and responsive across various devices.
Keep up the excellent work, and if you have any further questions or need assistance with anything, feel free to ask.
Mail: [email protected]
Instagram : its_rkravi
Together, we can continue to build a supportive and knowledgeable community.
Best regards, Rahul Kumar Ravi
Happy Coding!
Marked as helpful0 - @spectrxttSubmitted over 1 year ago@its-rkraviPosted over 1 year ago
Congratulations @spectrxtt for completing the challenge.
Welcome to the Frontend Mentor Platform. I want to give you some feedback regarding your code. Inside the style.css file you write a lot of CSS properties which I think not needed. Your design is not responsive for mobile screen.
Below, I tell you how to make it responsive for mobile screens.
Note:
What we want is whatever written inside the body tag or most specifically we want to center our QR code component.
here is the code what you write inside the body tag.
body{ background-color: var(--clr-Light-gray); max-height: 100%; // here instead of 100% you need to give height of 100vh or whatever the height mention // in the desktop design screenshot. display: flex; flex-direction: column; // no need this property also. align-items: center; justify-content: center; padding: 3rem; // you don't need to write padding here. text-align: center; // yes we need this because we want our text in center. }.back { width: 300px; // instead of only width you can use max-width that's why your design not responsive for // small screens. so please change width to max-width. height: 440px; // instead of only height you can use min-height that's why your design not responsive //for small screens. so please change height to min-height. // NOTE: // if you don't want to change height then no problem it works fine. display: flex; margin: 0; // I think you don't need this property but you can use this for adjust your component so // that it looks like original one. background-color: var(--clr-white); border-radius: 1.5rem; position: relative; // I don't know why you write this property. }Few Tip:
Using Flexbox or Grid to center elements can offer several advantages, including better responsiveness, cleaner code, and improved compatibility. Additionally, it promotes the adoption of best practices in web development.
Use more modern and flexible techniques like Flexbox or Grid for layout purposes. These CSS features are designed to make web development easier, more maintainable, and responsive across various devices.
I hope you find this feedback helpful.
Keep up the excellent work, and if you have any further questions or need assistance with anything, feel free to ask.
Mail : [email protected]
Instagram : its_rkravi
Together, we can continue to build a supportive and knowledgeable community.
Best regards, Rahul Kumar Ravi
Happy Coding!
Marked as helpful0 - @lizzmullowneySubmitted over 1 year ago@its-rkraviPosted over 1 year ago
Congratulations @lizzmullowney for completing the challenge.
Welcome to the Frontend Mentor Platform. your design looks good. Almost similar to the actual design. keep doing and become better and better everyday in frontend design component.
Best of Luck
Few Tips:
Use more modern and flexible techniques like Flexbox or Grid for layout purposes. These CSS features are designed to make web development easier, more maintainable, and responsive across various devices.
Keep up the excellent work, and if you have any further questions or need assistance with anything, feel free to ask.
Mail: [email protected]
Instagram : its_rkravi
Together, we can continue to build a supportive and knowledgeable community.
Best regards, Rahul Kumar Ravi
Happy Coding!
0 - @SaumyaG1318Submitted over 1 year ago@its-rkraviPosted over 1 year ago
Congratulations @SaumyaG1318 for completing the challenge.
Welcome to the Frontend Mentor Platform. I want to give you some feedback regarding your code. Inside the style.css file you write a lot of CSS properties. your code looks massy When I saw your code. you write a lot of properties which are not applied but you write it I don't know why.
Look at this code.
.circle { /* Circle ki pershani */ position: relative; left: 50%; translate: -50%; padding: 10px; margin: 0; height: 100%; background-image: linear-gradient(#4d22ca, #4734f0); border-radius: 50%; max-width: 30%; /* text ki pershani */ font-size: 1em; color: var(--LightGray); text-align: center; text-justify: center; }there are a lot of problems in your code. So I just want to tell you go to this link link and watch How I write the code for same code. I think it helps you.
I just want to tell you our task is not to just make a web component. (aur kam khatam). Actually , Our task is also write the clean code so when someone watch our code he/she can understand easily. and in future if we need to do some changes. We can also do this without any problem.
I hope you understand what I want to tell you.
Few Tip:
Use more modern and flexible techniques like Flexbox or Grid for layout purposes. These CSS features are designed to make web development easier, more maintainable, and responsive across various devices.
I hope you find this feedback helpful.
Keep up the excellent work, and if you have any further questions or need assistance with anything, feel free to ask.
Mail : [email protected]
Instagram : its_rkravi
Together, we can continue to build a supportive and knowledgeable community.
Best regards, Rahul Kumar Ravi
Happy Coding!
Marked as helpful1 - @akaFatmaSubmitted over 1 year ago@its-rkraviPosted over 1 year ago
Congratulations @foufoue for completing the challenge.
Welcome to the Frontend Mentor Platform. I want to give you some feedback regarding your code. Inside the style.css file. your component is not center properly. So you need to do some changes in your CSS file.
you create a section which is inside the body.
you give some styling to the body which is given below.
body { display: flex; justify-content: center; }just remove these two properties we don't need them.
justify-self: center margin: 6rem autofirst of all you need to give a height to this body. like 100vh. and whatever the content which is inside the body is centering horizontally. Along with this you also need to center it vertically. So for this you need to write the code which is given below.
body { height: 100vh; display: flex; justify-content: center; align-items: center; }Few Tips:
Using Flexbox or Grid to center elements can offer several advantages, including better responsiveness, cleaner code, and improved compatibility. Additionally, it promotes the adoption of best practices in web development.
Use more modern and flexible techniques like Flexbox or Grid for layout purposes. These CSS features are designed to make web development easier, more maintainable, and responsive across various devices.
I hope you find this feedback helpful.
Keep up the excellent work, and if you have any further questions or need assistance with anything, feel free to ask.
Mail : [email protected]
Instagram : its_rkravi
Together, we can continue to build a supportive and knowledgeable community.
Best regards, Rahul Kumar Ravi
Marked as helpful0
