(CSS) How to display a block (or inline) element only if room allows, in 2017?

[nephylym]

As a designer, my first layout a few years removed from coding is turning out better than I hoped, thanks mostly to the help I got via these forums getting up to speed.

Back in the day, when we wanted to display a div only if there was room for it, we'd run a javascript check on the client's resolution, as so :

$(document).ready(function () {
   if ($(window).width() < 1024)
  $('body').addClass('too-narrow');
});

What I'm trying to accomplish is displaying a fixed-dimension <span> container floating right of paragraph text - but only if the flexible container is "at least this wide".

I'm looking for a very binary response here, as in the <span> is either there or it's not. If there's no room, I'd rather the code ignore the <span> altogether (rather than load it and just not display it) because it will carry a background image I'd rather not load if I don't need to. But maybe that's just me being greedy with what I want, not a must-have (if the img must load regardless, I am okay with it).

This is a bit different from simply checking screen or even viewport resolution, as I am specifically looking to create a rule based on the container's size. Are we there yet (as far as simple, universal code that can accomplish this easily; like those new CSS3 properties I'm still learning about) or am I better off relying on those 2011 js screen res methods when it comes to displaying a block or inline element solely if space allows?

Thanks in advance to all the usual suspects. You make the world a better place.

[Jon Fritz]

There's nothing in CSS that would allow it to be based on a random container's width within your page.

However your browser window will necessarily need to be a given minimum size to get your container to the right width, so you'd base the Media Query on that window width rather than the container width.

[pziecina · Accepted solution]

@media (max-width: xxxx px) {

div {

display: none;

}

}

If the div or whatever goes below the specified pixel width it will not be displayed.

[nephylym]

pziecina  wrote

@media (max-width: xxxx px) {

div {

display: none;

}

}

If the div or whatever goes below the specified pixel width it will not be displayed.

This seems simple and efficient, but where does the code look for that max-width, in this instance? (the container, the viewport, or the screen res?)

[pziecina]

Thats for you to decide.

The standard is to use 'screen' the full decleration would be -

@media only screen and (max-device-width: 480px) {


+ your css.

but you can choose from a number of optional rules to add, see -

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

[Nancy OShea]

CSS media queries are based on the viewport break point or range of break point (min-width) and (max-width) values that you specify. 

Nancy

[Nancy OShea]

Bootstrap has built-in Responsive Utility classes for this.  Although the image or whatever is loaded to all devices even if they can't see it. 

Bootstrap CSS Helper Classes Reference

I would not use a <span> tag for this.   In most cases, I would use a  pushed or pulled <div> group.

For example:

<div class="row">
  <div class="col-sm-4 col-sm-pull-8">FOR ALL DEVICES</div>
  <div class="col-sm-8 col-sm-push-4 visible-md visible-lg">FOR MEDIUM & LARGE DEVICES ONLY</div>
</div>

In Bootstrap 4 Alpha the Responsive Utility classes are renamed

https://v4-alpha.getbootstrap.com/layout/responsive-utilities/

Nancy