Order summary card using bootstrap and media queries

Community feedback

• 

  Hafizan Adli•1,190

  @hafizanadliPosted over 3 years ago

  You only set the card width with 35%. So its width always only 35% on its container in every screen, that will ruined when open in small screen. You can set the width with around 90% and also set max-width to some particular size so it won't grow on wider screen.

  Great job!

  Marked as helpful

  0

  ---

  

  Andrei Șontea•15

  @AndreiS22Posted over 3 years ago

  @hafizanadli so what you're saying is that in the media query I should set the width to 90%?

  0

  

  Hafizan Adli•1,190

  @hafizanadliPosted over 3 years ago

  @AndreiS22 not in the media query. the default width will be 90%. but you have to set max-width, so when the screen going wider the card width will only grow to that max-width

  0

  

  Andrei Șontea•15

  @AndreiS22Posted over 3 years ago

  @hafizanadli, just made the updates you recommended me. It definitely is something else. Thank you for your help! :D

  1
• 

  Adaeze Ikemefuna•95

  @AdaezeIkemefunaPosted over 3 years ago

  You did do the right thing with those svgs, they aren't the problem.

  • Reduce the height of the elements though and add the color to the background too. Set it to no-repeat and cover. look at how i did mine.

  body{
      
    background-image: url(./images/pattern-background-desktop.svg);
    background-color: var(--paleblue);
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    position: relative;
    z-index: -1;
    color: var(--desaturatedBlue);
  }
  

  tell me if this was helpful

  Marked as helpful

  0

  ---

  

  Andrei Șontea•15

  @AndreiS22Posted over 3 years ago

  @Ada-ikemefuna, thank you for your help! It worked. But why do I have to put no-repeat. Shouldn't the svg scale up or down automatically?

  0