CODEWITHSUNDEEP
cssresponsive-design
ritch
ritch

Reputation: 1808

Responsive CSS - Two set sizes?

I'm hoping someone could shed some light on how I would do this in jQuery, css etc..

I have a website with the width of 900 pixels. But if the user expands there window with a width of 1140 pixels or more, I would like the website to have a set the width 1440 pixels. Nothing in between, reason for this is because I am using the jQuery quicksand plugin and I would like everything to fit perfectly.

Upvotes: 0

Views: 373

Answers (4)

johnmadrak
johnmadrak

Reputation: 825

If you just want to do this with jQuery and CSS, you could try the following (which is incredibly simple and not the best way to do it but meets your requests)

$(document).ready(function(){
  $(window).resize(function(){
    if($(window).width() >= '1440'){
      $("#wrapper").css('width','1440px');
    } else {
      $("#wrapper").css('width','900px');
    }
  });
});

Alternatively, you could also try this which will make it easier to change other aspects of the layout by nesting your css:

CSS

#wrapper_small { width: 900px; }
#wrapper_large { width: 1440px; }

jQuery

$(document).ready(function(){
  $(window).resize(function(){
    if($(window).width() >= '1440'){
      $("#wrapper_small").attr('id','wrapper_large');
    } else {
      $("#wrapper_large").attr('id','wrapper_small');
    }
  });
});

Upvotes: 0

imakeitpretty
imakeitpretty

Reputation: 2116

create a media query by putting something like this in your css:

@media screen and (min-width:1400px;) 

{
   #div {
   max-width:1440px;
   width:100%;
   }
}

Upvotes: 0

folktrash
folktrash

Reputation: 186

Media Queries are indeed the way to go; With no links or code samples, something like this should get you started, in your css:

#someSelector {width:900px;}//all the css here for less than 1140px

@media all and (min-width:1139px) {//css here for 1140 and up
    #someSelector {width:1140px;}
}

Upvotes: 2

dezman
dezman

Reputation: 19358

I would use media queries, you can find info here. They are pretty rad.

Upvotes: 1

Related Questions