Making Topbar image responsive so it displays the same on all devices

Support
#1

I have added some custom CSS to make an image display above the navbar on my renew theme. But when I change screen sizes the image is not responsive, Is there more CSS I need to add to get the image to be responsive on all devices?.

Please see here www.goforfreemiles.com.

#2

Hey @mickster58,

Please add following CSS property background-size: 100%; just under .x-topbar CSS class.
For example

.x-topbar {
    background: url(http://www.goforfreemiles.com/wp-content/uploads/2017/08/Logo150x920.jpg) no-repeat;
    padding-bottom: 138px;
    background-size: 100%;
}

As you have declare padding-bottom it may reflect in smaller devices. You can use media query to adjust bottom padding on smaller devices.
Here is example for how to use media query : https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Hope this helps

Regards

#3

Hi thanks for replying!, I have added the background-size and it works now. But you are correct about the padding when I go to smaller screen sizes. I have tried inserting a media query but that removes the image. Unless I am coding it wrong I have inserted this codee.

/* Top-bar image */
@media screen and (max-width: 1000px) and (min-width: 480px) {
.x-topbar {
background: url(http://www.goforfreemiles.com/wp-content/uploads/2017/08/Logo150x920.jpg) no-repeat;
padding-bottom:138px;
background-size: 100%;
}

#4

Hi,

Upon checking, I can see you have replace your image with revslider.

Please let us know if you still need help on this.

Thanks

#5

I have replaced it with the rev slider. That was the much easier option. Thanks for your help :slight_smile:

#6

Glad you’ve sorted it out.