[Solved] Media Queries issue

[MT Fresco]

hi all,

I am using bootstrap 3.2 for one of my client website. I am using col-xs-6 to do responsive portfolio page. Actually I want to remove col-xs-6 when it went to 480px dimension.

Thanks in advance.

[Paulie_D]

Actually I want to remove col-xs-6 when it went to 480px dimension.

It’s not clear what you are trying to do.

Do you have a media query for 480px?

Do you have a link we could look at?

[TheDutchCoder]

Bootstrap doesn’t seem to have responsive show/hide classes, but you can create them yourself.

Example:

/* Mobile hiding/showing */
.hide-m {
  display: none;
}

.show-m {
  display: block;
}

/* Laptop hiding/showing */
@media screen and (min-width: 768px) {
  .hide-l {
    display: none;
  }

  .show-l {
    display: block;
  }

}

/* Desktop hiding/showing */
@media screen and (min-width: 992px) {
  .hide-d {
    display: none;
  }

  .show-d {
    display: block;
  }

}

Not sure if I’m using the right Bootstrap media queries, but you can alter them yourself ;-)

Then to show/hide a column you can do:
<div class="col hide-l show-d"></div>

Which will show the column on mobile, hide it on laptop and show it on desktop.

[Krish1980]

I am using bootstrap 3.2 for one of my client website. I am using col-xs-6 to do responsive portfolio page. Actually I want to remove col-xs-6 when it went to 480px dimension.

You’ll have to write your own media query since Bootstrap targets the breakpoints – ≥1200px (large devices,lg),≥992px(medium devices,md),≥768px(small devices, sm) and <768px(extra small devices, xs)

If you wish to ‘remove'(as in hide) the col at 480px, you’ll have to add a custom class that hides the container (actually since bootstrap uses min-width media queries it might be more consistent to do it the reverse way – hide it to begin with and then reveal it above 480px by using min-width)

If you wish to remove the ‘xs-6’ property, then again , you’ll have to add a custom class that makes the column full width(100%) below 480px. Only do this if it is absolutely essential to target the 480px breakpoint, because Bootstrap has an sm class too – “sm-6” for instance which becomes full width(100%) below 768px.

[Krish1980]

@TheDutchCoder

You could do the same with Bootstrap too, just not for the break-point mentioned by the OP

http://getbootstrap.com/css/#responsive-utilities-classes

[MT Fresco]

Thanks all of you for your kind answers.

Actually one of my facebook friend told me solution last night.

[Author]

Posts