My website's home page appears differently on a 1920px screen (big desktop screen) versus a 1366px (15" laptop) screen.
While it looks perfect on the larger screen, there is a noticeable gap between the menu, text below, and the banner image on the smaller screen.
To address this issue, I've tried using a media query specifically for the 1366px screen. However, despite moving the text up successfully within the query, I'm struggling to move the banner image without affecting the text placement. Negative padding and margins haven't yielded the desired result. Can someone assist me in adjusting the positioning of the banner image or shed light on why this discrepancy occurs at this particular screen resolution? The website can be found at www.flowersforeveryone.co.za. Please note that the issue may vary depending on your resolution. I have also included an image for reference.
The CSS code snippet is provided below -
@media (min-width: 1300px) and (max-width: 1400px) {
.page-banner-wrap .page-banner > .container{
margin-top: -100px;
margin-bottom: 0px;
}
.page-banner-wrap .page-banner .page-header > .page-title{
font-family: 'Source Sans Pro', sans-serif !important;
margin-top: -100px;
font-weight: 300;
margin: 0 auto;
max-width: 590px;
font-size: 21pt;
line-height: 1.2;
word-wrap:break-word; max-width:38ch;
}
.page-banner-wrap .page-banner .banner-content{
margin-top: 20px;
margin-bottom: 0px;
}
#lsx-banner .tagline {
font-size: 16pt;
color: #000;
font-weight: 300;
text-transform: uppercase;
padding-bottom: 20px;
}
.page-banner-wrap .page-banner > .page-banner-image{
position: relative;
height: 100vh;
width: 100%;
margin-bottom: 20px;
}
}