I am having an issue with the responsiveness of my website. When in desktop mode, I have a centered div with a grey background color. However, in tablet mode, I would like the div and its content to remain centered but fill the entire width of the screen with grey. Is this achievable?
@media screen and (min-width: 767px) and (max-width: 1366px) {
.backgroundGrey {
background-color: #F2F2F2;
/* hoping it's doable */
}
}<body>
<section>
<div class="flexCenter backgroundGrey">
<div>
<h2>Content<h2>
</div>
</div>
</section>
</body>Thank you everyone for your responses. After some trial and error, I managed to find a solution to my problem by adding a new div with the background color set to position absolute:
<body>
<section>
<div class="backgroundGreyFullWidth"></div>
<div class="flexCenter">
<div>
<h2>Content</h2>
</div>
</div>
</section>
</body>
@media screen and (min-width: 767px) and (max-width: 1366px) {
.backgroundGreyFullWidth {
background-color: #f2f2f2;
position: absolute;
z-index: -1;
width: 100%;
height: 650px;
left: 0;
right: 0;
}
}