Order Summary Component using Html, CSS

Community feedback

• 

  Claudio Netto Junior•180

  @claudionettoPosted about 1 year ago

  Depending on the image problem, you have some properties that can help you with this, in this case it would be: background-repeat: no-repeat; background-size: contain;

  The first, as the name implies, is for non-repeat, and the second with background-size contain, the background image is sized to fit completely inside the parent element, so that the image is not cut off. There are other possibilities with these attributes too, but for this case these would be the ideas.

  Another tip is to try to use shorthands, for example in the margin, in some places you have defined 3 properties for the margin when you could use the margin shorthand and define just one, for example, margin: 0px 30px 20px 30px, I'm saying that I want a margin-top of 0px, a margin-right of 30px, a margin-bottom of 20px and a margin-left of 30px, if you want to set it equal to the sides and equal vertically as well just use margin: 10px 20px; in that case you've set 10px for top-bottom and 20px for right-left.

  There are several other abbreviations that made your code shorter and cleaner, it's worth researching. Good studies!!!

  Marked as helpful

  1

  ---

  

  Ashok Kumar Dharanikota•210

  @Ashok-Kumar-dharanikotaPosted about 1 year ago

  Hi @claudionetto

  Thank you for sharing your insights. I will definitely work on it. and I literally forgot this shorthand "margin: 0px 30px 20px 30px". Thank you I will try to avoid it next time.

  0
• 

  Nayan Bhatt•980

  @freaky4wrldPosted about 1 year ago

  Hey there, congratulations on completing the challenge, here's what you can do with the background image:-

  • first of all add the background-image property to body
  • then use the following code

  body{
        background-image: url(img-url);
        background-repeat: none;
        background-size: cover;
        background-position: center;
  }
  

  • to make it more like the challenge one you can add a linear gradient as well, here you go with the references:- background-image linear-gradient

  Hope you find it useful

  Marked as helpful

  1
• 

  Rajaul Islam Ratul•1,250

  @ratul0407Posted about 1 year ago

  @Ashok-Kumar-dharanikota congratulations on completing this challenge, you've done a great job🎉 But there are some things you should consider changing🙂 :

  • I don't know why you chose to give a background-color to your wave-container (background: rgba(55, 210, 237, 0.412); )🤔 Remove it, you don't need this.
  • Then inside of your wave-container you've already set the background-image you just need to set the other background properties to make it work properly

  .wave-container {
  background-size: contain;
  background-repeat: no-repeat; //it will stop the repeating issue with your background-image
  background-color: hsl(225, 100%, 94%); //pale blue
  

  The background image and color issue is solved🎉🎉

  • And now to make the third div go right next to the music icon, You don't need the .third div inside of your div one you can have two children's a second div and a <a> tag. Inside of your second div you can put the music icon and a <p> with a <span> just like you set on your third div and then

  .one {
  display:flex;
  justify-content: space-between:
  }
  

  There are two items in your one div a div with a class of second and a anchor tag so justify content of space between will separate both of them to the side of their parent element which one so the music icon and the p will go to one side as and the a tag will go to the other side as they are siblings and you can adjust the space of the music icon and p by giving the second a class of flex or maybe using padding or margin as you would like

  I hope it was helpful for you👍👍

  Happy coding brother🙂🙂

  0
• 

  Nayan Bhatt•980

  @freaky4wrldPosted about 1 year ago

  @Ashok-Kumar-dharanikota can you be more clear on your second query, like what exactly you want to ask and achieve........

  To me the interface looks pretty fine!!!

  0

  ---

  

  Ashok Kumar Dharanikota•210

  @Ashok-Kumar-dharanikotaPosted about 1 year ago

  Hi @freaky4wrld

  if we compare the design closely, the music icon and div( the "annual plan and 59.99/year" ) the space is more than that is present in the design that wouldn't be seen better user experience in a user perspective I think, and "Change" come out of the div( I didn't notice while pushing this code).

  just curious to know how to correctly implement this.

  0

  

  Nayan Bhatt•980

  @freaky4wrldPosted about 1 year ago

  @Ashok-Kumar-dharanikota Ok I get it now :), thanks to be descriptive enough...... well here's what you can do!!

  • first you can use the gap property, in your second class, give it an apt gap in rem/em units!!
  • lastly you can give your third class an appropriate width in percentage, and that will do the job for you!!!!

  Refer to this flex-cheatsheet

  Hope it resolves your query!!!

  0