Responsive Order Summary Component

Community feedback

• 

  Rahul Kumar Ravi•430

  @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 helpful

  0
• 

  Kiranpreet kaur•150

  @KkkiiiirranPosted over 1 year ago

  Hi! Thank you for such a detailed feedback. I'll follow your tips.

  1. I have created private repos. Is that the reason that the link is not working?

  1
• 

  Eduardo Torres•170

  @edu290386Posted over 1 year ago

  you can create a vercel account and then and then sync it with your github account. https://www.youtube.com/watch?v=aBRss9JAC30&ab_channel=RayneCoder.

  0