Hey everyone,
I want to put up the website banner - the same one that softr.io uses. When I insert the code, it somehow adds a massive space between the header and the next element.
Even if I just add the banner to the home page, it adds that space throughout the entire website.
Does anyone know how to fix it?
I’ll leave the code below:
@media (max-width: 576px) { .ph-banner { text-align: center !important; } } #sw-ph-banner { z-index: 1000; position: fixed; left: 0; top: 0; width: 100%; padding-top: 8px; padding-bottom: 8px; background-color: #69C3FF; -webkit-transition: background-color 200ms ease-in-out; transition: background-color 200ms ease-in-out; color: #181818; font-size: 15px; line-height: 18px; text-align: center; text-decoration: none; } #sw-ph-banner .center{ display: flex; justify-content: center; align-items: center; } #sw-ph-banner .center span{ margin-left: 8px; margin-right: 8px; font-weight: 600; } #sw-ph-banner span a { text-decoration: underline; color: #181818; } #sw-ph-banner img:first-child{ width: 18px; height: 18px; margin-left: 5px; margin-right: 15px; animation: slideLeft 1s ease-in-out infinite; } #sw-ph-banner img:last-child{ width: 18px; height: 18px; margin-left: 5px; margin-right: 15px; animation: slideRight 1s ease-in-out infinite; } @keyframes slideLeft { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(10px, 0); } } @keyframes slideRight { 0%, 100% { transform: translate(10px, 0); } 50% { transform: translate(0, 0); } }