Skip to content
OverviewSolutions
0
Comments
2
Gaurav Shekhawat
@Gaurav-Shekhawat

All comments

  • Mirko•40
    @mirk-00Submitted over 3 years ago

    Hi, this is my first try at html and css so i have some doubts i couldn't figure out by myself (lines refer to css file):

    1. line 42: I specified margins in order to center my card but i think it shouldn't be needed. I tried different align and justify properties but none of them centered the .card div in the viewport

    2. line 112, the most troublesome part: I wanted the image to take 48% of the whole card. I thought to specify width=48% since .bg-image is direct child of .card. But this only let the image take less than 25% (width values). Also setting width to 100% makes the image take less then half of the .card container. I can't understand how the width percentages work. I also used viewport height and width (vh and vw) because i thought that 100vw should have let the image cover the whole viewport but instead only took about half of the card container, so there's obviously something I'm missing. I'd really like an explaination for this behaviour

    3. line 118: i'm not sure this is the smartest way to set the padding. Suggestions? Thanks in advance

    Preview Card Component - HTML and CSS

    3
    Gaurav Shekhawat•35
    @Gaurav-ShekhawatPosted over 3 years ago

    For your point 1, enclose the entire card class inside another div, let say "container", then set the display properties of the "container" div as "flex", then set the justify-content and align-items properties to center

    Marked as helpful
    0
  • Vihaga Yohan•15
    @VihagaYohanSubmitted over 3 years ago

    Hi, I'm Yohan and new to web dev. My question is how to make background SVG image center in tablet mode using media queries. I tried with below code block and didn't work as i expected. body { background: url(../images/pattern-background-mobile.svg); background-position: center; background-repeat: no-repeat; background-size: cover; }

    When I applied the above style, the background image was stretched. How to fix this issue. Thanks in advance, Yohan

    HTML and CSS

    2
    Gaurav Shekhawat•35
    @Gaurav-ShekhawatPosted over 3 years ago

    I don't know if it will work, but try to enclose your card div inside other div, let say whose class is "outer-container", then set the background of that "outer-container" as that svg file.

    Marked as helpful
    1