Bootstrap - Resize Jumbotron Image Background Coverage Based On Device Screen Size

0
votes

I am using a Bootstrap jumbotron to display list results. This jumbotron uses an image as the background which is set to cover 50% of the width and 100% of the height initially. Please find below the style code implemented in the HTML div of the jumbotron:

style="width:80%;max-width:750px;min-height:220px;
background:url({{ property.properties_pictures.property_image1.url }});
background-size:50% 100%;background-repeat:no-repeat;
list-style-type:none;border:solid;border-width:1px;border-color:#d6d0ca;"

I would like to inverse the coverage of the background image to 100% of the width and 50% of the height for devices that have a screen width of less than 500px.

I tried using media queries with no luck:

@media (max-width: @screen-sm-min)
{
.jumbotron
{
    background-size: 100% 50%;;
}
}

It would be great if anyone could help on this.

Thanks.

1
csstwitter-bootstrapbackground-imageresponsive

1 Answers

0
votes

You should use your media queries in this format--

@media only screen and (max-width:500px){
.jumbotron
{
    background-size: 100% 50%;;
}
}

Hope this helps!