CODEWITHSUNDEEP
javascripthtmlcssangular
Bijil
Bijil

Reputation: 61

Can I change the css of a parent component from a child component

app.component.html

<div class="container main-area">
<app-header></app-header>
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>

global.css

.container{
max-width : 1022 px;
}

child.component.html

<div class="media-area">
<media-area></media-area>
</div>

Here my child component is also taking max-width of 1022px which is from the container of app.component.html

How can I override that and make 

.media-area{
width: 100%; (it should take full screen width and not the parent container width)
}

apart from this component, all other component needs the container width to be 1022px

Upvotes: 4

Views: 408

Answers (2)

Harshit
Harshit

Reputation: 1565

The vw css syntax can be used. The child component will adjust according to container's width as you want. For 100% width coverage, use width: 100vw.

Upvotes: 0

codeVerses
codeVerses

Reputation: 241

Try using vw css units for setting element's width. These are relative to 1% of the width of the viewport.

.media-area{
width: 100vw; /* = 100% width of viewport/the browser window size */
}

Upvotes: 3

Related Questions