CODEWITHSUNDEEP
htmlwordpress
Michelle
Michelle

Reputation: 549

How do I move the website title above the banner image

My website banner has suddenly appeared above my header text, rather than below it. I've fixed the CSS on the desktop version but I can't get it right on the phone. (It's wordpress and the text is added as a banner title and tagline)

Can someone please tell me what the code should be.

The website is www.flowersforeveryone.co.za

@media (max-width: 475px){
    .page-banner-wrap .page-banner .page-header > .page-title{
        font-size: 14pt;
        line-height: 1.2;
}

#lsx-banner .tagline{
font-size: 9pt;

}

.page-banner-wrap .page-banner > .page-banner-image{
    height: 30vh;
position: relative;
}

Upvotes: 0

Views: 210

Answers (1)

thex
thex

Reputation: 620

Something like the CSS below should solve the problem. I don't know why this happened. I assume the DOM markup changed and so the banner is not displaying correctly anymore. You might need to tweak the settings below. This is just a hint where to start. I made the banner quite appealing but there is still room for improvement. I repositioned the background (changed the size at smaller screen devices - 720px / 768px breakpoint) plus stretched the image container at specific screen sizes (<= 991px) to 100%.

.page-banner-wrap .page-banner > .container {
    margin-top: 20px;
}  

.page-banner-wrap .page-banner > .page-banner-image {
    background-position: 50% 65% !important;
}    

@media only screen and (max-width: 991px)
.page-banner-wrap .page-banner > .page-banner-image {
    height: 100%;
    position: absolute;
}

@media (max-width: 768px)
.page-banner-wrap .page-banner > .page-banner-image {
    background-size: 350px;
}

@media (max-width: 720px)
.page-id-10 .page-banner-wrap .page-banner > .page-banner-image {
    background-size: 300px;
}

Edit: Changing the container margin to top might also be a good idea to get a more appealing look on desktop.

Upvotes: 1

Related Questions