CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Code Tree
Code Tree

Reputation: 2209

bootstrap grid styles intended for extra small also works for medium screen

I tried to apply some css targeting only the XS screens, but it is being applied for medium screen as well.

enter image description here

See the style defined clearly for .col-xs, but I am viewing it in full screen on a desktop and it renders xs specific styles.

Am I doing something wrong here or missing any snippet from bootstrap?

Thanks,

Upvotes: 1

Views: 472

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362430

The CSS classes on elements are always applied unless there is a media query.

In the case of Bootstrap specific media queries this would be..

@media (max-width: 768px) {

   .prop-image {
      margin-right: auto;
      margin-left: auto;
   }

}

Upvotes: 3

Benneb10
Benneb10

Reputation: 1489

The way you're using column in bootstrap right now is saying at a md width span 4 columns and at a xs width span the entire page. It does nothing to hide content.

If you want an easy way to hide and only show the content at xs screen width you need media queries, or another option is to use Bootstraps built in responsive utility class of

.visible-xs-*.

This will only show the containing element at xs.

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

Upvotes: -1

Related Questions