Morning from -2Β° but sunny York UK
On this site http://www.website-project-manager.co.uk/ The cookie alert banner that sits in the footer tucks under the left nav. Ive tried to re position it but whilst it looks perfect in mobile it looks bad in desktop as half of it sits under the left nav
Here is the relevant CSS:
/* Cookie Banner */
.cookie-banner {
position: fixed;
bottom: 40px;
left: 10%;
right: 10%;
width: 80%;
padding: 5px 14px;
display: flex;
align-items: center;
justify-content: space-between;
background-color: #eee;
border-radius: 5px;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
.close {
height: 20px;
background-color: #777;
border: none;
color: white;
border-radius: 2px;
cursor: pointer;
}
And JavaScript:
// Cookie banner
if(localStorage.getItem('cookieSeen') != 'shown'){
$(".cookie-banner").delay(2000).fadeIn();
localStorage.setItem('cookieSeen','shown')
}
$('.close').click(function(e) {
$('.cookie-banner').fadeOut();
});
Any tips on how to place it correctly in all viewport sizes?
Thanks in advance,
David