Skip to content
OverviewSolutions
10
Comments
7

Sebastian

@Debesta170 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Sebastian•170
    @Debesta

    Nice work! You can improve some things, first is that You have to make 2 files, one for HTML and one for styles CSS, second You can position image center by style background-position: center

    .image{
      width: 250px;
      height: 270px;
      background-image: url(images/image-qr-code.png);
      background-size: cover;
      background-position: center;
      border-radius: 15px;
    }

    After applaying this style QR code will look better, I mean it will be on the middle of this card.

    Marked as helpful
  • Sebastian•170
    @Debesta

    You have to make 2 different files, one for HTML and one for CSS and if You want the text not to go beyond the edge of the card you can't set a permanent height. Remember if You want to add text You need to use relevant tag (<p>, <a>, <h1>, <h2>, ...). I mean You have to use some of this tags in divs .subtitle and .heading

    Marked as helpful
  • Sebastian•170
    @Debesta

    Well, You can delete div with class .card-body, because You don't refer to it anywhere, and if You want to get gap between elements in card and edge of card You can use padding on div with class .card

  • Sebastian•170
    @Debesta

    If you want to position element in the middle u can use basic argument like position:

    in your solution

    body{
position: relative;
}

.qr{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
  • Sebastian•170
    @Debesta

    Well in this project I think you don't have to make mobile design because it's only one card, but in projects with e. g. 3 cards you can set them up in a columnar arrangement on mobile devices and in a row arrangement on devices with larger monitors. I always make it so that the code at the top is for mobile devices and I don't use @media queries there, then to change, for example, the position of an element on larger monitors I use @media queries, on the Internet you can find optimized breakpoints, first breakpoint is 576px (usually tablets start at this width), if I want to make changes on this breakpoint I just type:

    @media (min-width: 576px){ ................ }

    You will see changes in a given breakpoint after crossing such a screen width as in the argument.

    Marked as helpful
  • Sebastian•170
    @Debesta

    In my opinion image it's a little to big, because it's over 70% of this box height and you can add bos-shadow then it will be look like it is closer or spruced up.

    Marked as helpful
View more comments