CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapresponsive-design
raduken
raduken

Reputation: 2129

How to remove a css class and add another when I get a certain mobile resolution

I am using boostrap grid and is working perfect I just got a issue with col-xs-6 when I get the resolution 375px, col-xs-6 by standard come with 50% and I know I can just create a media query and change it for 100% and will fix my problem.

I just don't want do that kinda hack :), it's any way to remove the class col-xs-6 and add col-xs-12 when get 375px?

I know can just change it for col-xs-12 of course but that will change my div when I get 667px because xs is for extra small resolutions.

In jquery or even better in bootstrap?

My classes:

<div class="col-md-4 col-sm-5 col-xs-6 no-padding sidebar-container"> </div>

How it should look afterwards:

<div class="col-md-4 col-sm-5 col-xs-12 no-padding sidebar-container"> </div>

Upvotes: 1

Views: 2000

Answers (1)

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10207

First of all using media queries is not a hack its a way to change the website layout according to different screens.

But may be because of some reason if you don't want to use it or want to change the class only then you can do it by simple jquery resize function.

var winWidth = $(window).width();
function sidebarWidth(){
  if(winWidth>375px){
    $('.sidebar-container').removeClass('col-xs-12');
    $('.sidebar-container').addClass('col-xs-6');
  } else {
    $('.sidebar-container').removeClass('col-xs-6');
    $('.sidebar-container').addClass('col-xs-12');
  };
};

sidebarWidth();

$(document).resize(function(){
  sidebarWidth();
});

Above code will run on window load and will detect the screen and add the needfull class. But i am also using the same function in resize function because this will work if you resize the window after load.

Upvotes: 2

Related Questions