I am facing an issue with a CSS banner that is positioned absolutely and has responsive width and height based on viewport size. The challenge is that the element is centered on desktop and tablet devices, but not on mobile when the banner's width starts to shrink.
Unfortunately, I cannot rely on the traditional margin: 0 auto; method because fixed margins are required for the banner to function properly.
The code in question is as follows:
HTML:
<h1 class="banner">A Simple CSS Banner</h1>CSS:
@import url(https://fonts.googleapis.com/css?family=Rye);
body
{ background: #eee; }
.banner {
position: absolute;
left: 50%;
display: block;
margin: 100px -200px;
width: 400px;
max-width: calc(100% - 150px);
height: 60px;
border: 1px solid #8a1;
font: normal 30px/60px 'Rye';
text-align: center;
color: #451;
background: #9b2;
border-radius: 4px;
box-shadow: 0 0 30px rgba(0,0,0,.15) inset,
0 6px 10px rgba(0,0,0,.15);
}
.banner::before,
.banner::after {
content: '';
position: absolute;
z-index: -1;
left: -70px;
top: 24px;
display: block;
width: 40px;
height: 0px;
border: 30px solid #9b2;
border-right: 20px solid #791;
border-bottom-color: #94b81e;
border-left-color: transparent;
transform: rotate(-5deg);
}
.banner::after {
left: auto;
right: -70px;
border-left: 20px solid #791;
border-right: 30px solid transparent;
transform: rotate(5deg);
}
@media (max-width: 475px) {
.banner {
height: 90px;
line-height: 45px;
}
.banner::before,
.banner::after {
border-width: 45px;
border-right-width: 30px;
}
.banner::after {
border-left-width: 30px;
border-right-width: 45px;
}
}
Check out the working codepen here: https://codepen.io/Adam0410/pen/QZOKdV
Your assistance is greatly appreciated!