HTML, CSS, Bootstrap, JavaScript

Community feedback

• 

  argel omnes•1,800

  @argelomnesPosted almost 5 years ago

  Hey Vlad,

  Definitely check out the link Declan provided. You'll need it for your .shifted class. (desktop design) I suggest widening .cards a little more so the cards aren't compressed. Since you're using Bootstrap it would be better if you use their class(es) for the following: To center them, you'll need to remove your margin declarations in Supervisor and Calculator cards except for margin: auto. And then set their parent container to flex.

  1
• 

  Declan•300

  @declanslevinPosted almost 5 years ago

  Also, I would recommend you use the position property rather than margin-top to help with your positioning.

  You can set the parent container for a card to position: relative, then set the card itself to position: absolute. Then using the top property you can control how the card will be positioned relative to the parent container.

  I hope that makes sense, and I'm happy to answer any questions you might have about positioning in this way.

  Alternatively, you can also use Flexbox and CSS Grid for positioning, but I would recommend you learn as much as you can about position first before moving onto those :)

  1
• 

  Declan•300

  @declanslevinPosted almost 5 years ago

  Hi Vlad,

  I suggest you take a look at CSS media queries (e.g. @media ( min-width: 376px ) {})- these will allow you to set different CSS property values depending on the screen width. When rules are set within a media query, they will only be applied once the condition is met. So in the example above, any CSS rules set within the query will only be applied when the screen width is above 375px in width.

  1