Submitted about 3 years ago

Order summary card using bootstrap and media queries

Andrei Șontea• 15

@AndreiS22

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Order summary component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I'm not exactly sure that my solution works for mobiles, or that I did the right thing with those SVGs. Can someone tell me if and what I am doing wrong?

Community feedback

Hafizan Adli• 1,190

@hafizanadli

Posted about 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

Andrei Șontea• 15

@AndreiS22

Posted about 3 years ago

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

Hafizan Adli• 1,190

@hafizanadli

Posted about 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

Andrei Șontea• 15

@AndreiS22

Posted about 3 years ago

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

Adaeze Ikemefuna• 95

@AdaezeIkemefuna

Posted about 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

Andrei Șontea• 15

@AndreiS22

Posted about 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?

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord