Docs

[asdfrew]

I have tried so many different ways to make the topbar responsive. Last bit of CSS code I have tried is listed below:

.home .x-topbar {

background: url(http://…./someimage.jpg) no-repeat;
background-size: cover;
background-position: center center;
min-height: 200px;
background-color: #800000;
border-bottom: 0;
border-left: 0;

}

I have to set min-height, otherwise the image gets scaled down in size. Setting height as auto did not help. With the fixed height, when you make the browser smaller, the image resizes but topbar holds on to its min height, showing empty space around the image.

[Christopher]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[asdfrew]

This reply has been marked as private.

[Christopher]

Hi there,

I don’t see empty space around the background image, please provide us with screen shot.

For the time being, add

@media (max-width:767px){
.home .x-topbar {
    background-size: contain;

}
}

Hope it helps.

[asdfrew]

This reply has been marked as private.

[Christopher]

Hi there,

Please try this :

@media (max-width:340px){

.home .x-topbar {
    background-size: contain;
    height: 129px;
}
}
@media (min-width:340px) and (max-width:580px){

.home .x-topbar {
    background-size: cover;
    height: 221px;
}
}
@media (min-width:580px) and (max-width:767px){

.home .x-topbar {
    background-size: cover;
    height: 304px;
}
}

Feel free to adjust the height for different screen sizes.

Hope it helps.

[asdfrew]

Hi Christopher: I added the code to custom CSS. It doesn’t seem to make a difference. Thanks.

[Joao]

Hi There,

Would you mind providing your credentials so we can take a closer look?

At the moment your header is looking kind of broken in my opinion, I believe there is some CSS error on your code.

Please see imgs attached of how I see your website in desktop and mobile versions at the moment.

Let us know any other details you find useful regarding the layout you want to achieve.

Thanks

Joao

[asdfrew]

Christopher:

Thank you for your help. The issue is fixed. I used the below code. Thanks!

/* Making the image height responsive on the home page in the topbar */

@media (max-width:340px){

.home .x-topbar {
background-size: cover;
height: 129px;
}
}
@media (min-width:340px) and (max-width:580px){

.home .x-topbar {
background-size: cover;
height: 170px;
}
}
@media (min-width:580px) and (max-width:767px){

.home .x-topbar {
background-size: cover;
height: 290px;
}
}
@media (min-width:767px) and (max-width:1000px){

.home .x-topbar {
background-size: cover;
height: 375px;
}
}

@media (min-width:1000px) and (max-width:1200px){

.home .x-topbar {
background-size: cover;
height: 500px;
}
}

@media (min-width:1200px) and (max-width:1400px){

.home .x-topbar {
background-size: cover;
height: 600px;
}
}

[Joao]

Hi There,

Upon Checking your website seems like you fixed the issue.

Let us know if you need help with anything else.

Joao

[Author]

Posts