Skip to content
OverviewSolutions
10
Comments
7
Sebastian
@Debesta

All comments

  • Sebastian•170
    @DebestaPosted over 1 year ago

    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
    0
  • Sebastian•170
    @DebestaPosted over 1 year ago

    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
    1
  • Jason Ritter•40
    @HigokianSubmitted over 1 year ago

    Questions

    1. Nesting

    Any tips on how to determine how many layers will be needed? Specifically when for flex-box/boostrap? This is probably the biggest thing I struggle with.

    2. Centering Card

    This question kind of ties in the the nesting question. My biggest issue was getting the card to center horizontally and vertically. I ended up giving the body class="d-flex flex-column justify-content-center" and then a container nested within that with class="d-flex justify-content-center". Is there a better solution to this?

    I appreciate any and all feedback!

    Responsive QR Code Component Using Bootstrap

    3
    Sebastian•170
    @DebestaPosted over 1 year ago

    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

    1
  • Anitanuamh•210
    @AnitanuamhSubmitted over 1 year ago

    i struggle with the align-item center .i could'nt possition it to center, but it is responsive to mobile design

    responsive QR CODE SCAN

    2
    Sebastian•170
    @DebestaPosted over 1 year ago

    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%);
}
    0
  • Sebastian•170
    @DebestaPosted over 1 year ago

    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
    0
  • Sebastian•170
    @DebestaPosted over 1 year ago

    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
    1
  • Sebastian•170
    @DebestaPosted over 1 year ago

    In my opinion you need to use margins and paddings to make gaps beetween image and paragraphs and try to fix problem of border-radius of image, because it's only on the left side

    0