Media="(max-width: 960px)" Can't you use media like this?

Ideas
1

Can’t you use media like this?

2

You put the Media Queries in your CSS file like so:

@media (min-width: 960px) {
  .classnamehere {
    attribute: value;
  }
}

Min width is used more so now due to Mobile First responsive design so you will probably have to change that 960px to a different number to get your needed result.

1 Like
3

You can change the media query. click on

(min-width: 960px)

and change it to (max-width: 960px).
You can even do things like (min-width: 500px) and (max-width: 960px) if your use case specifically requires it, it does work in BSS.

Generally speaking though, Bootstrap philosophy is mobile first, so any media query should be thought of as “For this size and up, do this” BY DEFAULT. Which means, for your SMALLEST breakpoint, set your content correctly first, THEN add a media query for the breakpoint where you want the large stuff to come into play. It’s almost a good idea to create your page using the smallest viewpoint, and only expand it when you need to see how it will look on desktop. This is Boostrap philosophy. Get it right tiny sized first.

eg:

Say you’re thinking “I want this huge picture displayed when on desktop, every other time it can display the smaller one”

Your workflow in CSS should be:

.myboxclassnamethathasthepicture {
background: url(the small picture.jpg/png/webp);
}

DUPLICATE THAT CSS BLOCK

Change your viewport in the upper right of the editor preview to the breakpoint you want the BIGGER picture to display.

Right-click that duplicated css block, and “add media query”
now change the line:

@media (min-width: 960px)
.myboxclassnamethathasthepicture {
background: url(the small picture.jpg/png/webp); INTO background: url(THE BIG PICTURE.jpg/png/webp);
}

Now your idea will work. Remember, Bootstrap Philosophy is “works on smallest first, add media queries for bigger stuff”. Not that you can’t wrestle the css to work for you anyway, but this is how it is designed.

2 Likes
4

This is one of the clearest explanations of how Bootstrap wants you to work.
Cheers.

1 Like