Placing Content in mat card

Question

I am new to frontend development and learning and practising CSS. I am using a mat card as shown in attached image

My code is as follows

   <div class="col-4">
                        <mat-card class="card">
                                <div class="header">
                                    <div class="content1">Content of My header</div>
                                    <div class="content2">Content of My header</div>
                                </div>
             
                                <button mat-button>MyButton</button>
                        </mat-card>
                    </div>

.card {
  background-color: red
  height: 47vh;
  display: flex;
  top: 2.5rem;
  flex-direction: column;
  right: 2rem;
}

.header {
  background-color: red;
  padding: 3% 0% 1% 3%;
}

If we see Header is leaving spaces on all three sides. I want to cover entire header with red color without leaving these sides. How can I do that?

score 0 · Answer 1 · edited Mar 24 '21 at 04:07

0

Change the .card css to:

  .card {
    background-color: red
    height: 47vh;
    display: flex;
    top: 2.5rem;
    flex-direction: column;
    right: 2rem;
    padding:0; <------Add this line
  }

edited Mar 24 '21 at 04:07

Rocky

23
3

answered Mar 23 '21 at 18:33

ShanieMoonlight

1,623
3
17
28

Because of padding :0 button also sticking to all 4 corners. I don't want button ton be attached to corners like header. How can I do that? – – Rocky Mar 23 '21 at 19:09
put the button in a container div and give the container a padding. – ShanieMoonlight Mar 23 '21 at 22:36
You could also just put a margin on the button. – ShanieMoonlight Mar 24 '21 at 08:21

score 0 · Answer 2 · answered Mar 23 '21 at 18:35

0

try margin:0 inside .card class

answered Mar 23 '21 at 18:35

fecassa_wp

1

Stairss · Answer 3 · 2021-03-23T19:23:29.133

0

I would like to recommend you adding a reset style file to your website. Every browser has got different default settings and it will prevent having styling differences in the future. This is a basic way how to do this:

HTML:

<link rel="stylesheet" href="/path/to/reset-css/reset.css" />

CSS:

@import '/path/to/reset-css/reset.css';

Example in your code:

@import 'https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css';
.wrapper{
  height: 47vh;
  border: 1px solid black;
}

.header{
   background-color: blue;
  display: flex;
  flex-direction: column;
  height: 90%;
}

  <div class="wrapper">
        <div class="header">
            <div class="content1">Content of My header</div>
            <div class="content2">Content of My header</div>
        </div>

        <button>MyButton</button>
    </div>

edited Mar 23 '21 at 19:23

answered Mar 23 '21 at 18:43

Stairss

176
1
14

Because of padding :0 button also sticking to all 4 corners. I don't want button ton be attached to corners like header. How can I do that? – Rocky Mar 23 '21 at 19:08
@Rocky your button component is inside the parent container which has the property `display: flex` that's why it has got the same size as other components. I modified your structure, let me know if it is fine. – Stairss Mar 23 '21 at 19:27

Placing Content in mat card

3 Answers3