how to use jquery to add css based on screen width

Question

I like to write a code that will add margin:0 auto; to a div.

var bestsize = 1445;
 var width = $('.first-image').width();
if( width >= bestsize){
    $('.first-image').css({margin : '0 auto'});

}
else {
    $('.first-image').css({margin :' 0 0 -1px 0'});

}

first-image is a div that has a background image

This is what I have, I think it should work. but maybe i am not stating it correctly. currently nothing will happen. I have feeling that I do not use width the proper way. Can someone give me an idea if this solution is no good?

Thank you very much :)

i presume that .first-image is a img tag.. if so, are you waiting until the image has loaded before getting the width of it? then you need to check the window.load event — Jonathan Marzullo
– Jonathan Marzullo, Commented Nov 7, 2013 at 19:59
what do you mean nothing will happen ? doesn't on of the two css calls execute? — Gabriele Petrioli
– Gabriele Petrioli, Commented Nov 7, 2013 at 19:59
The div has a background image, yes the css calls do not execute sorry i am unclear — Naomi K
– Naomi K, Commented Nov 7, 2013 at 20:03

Muath · Accepted Answer · 2013-11-07 21:06:00Z

3

why do you need to do it from java-script instead of using CSS media queries?

.first-image{
  margin: 0 0 -1px 0;
}

@media (min-width: 1445px) {
  .first-image{
    margin : 0 auto;
  }
}

edited Nov 7, 2013 at 21:06

Muath

4,43712 gold badges44 silver badges70 bronze badges

answered Nov 7, 2013 at 20:02

homtg

1,9991 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ben Dubuisson · Accepted Answer · 2013-11-07 19:59:15Z

0

First can you see anything in your debug console ?

Is jQuery loaded ?

Try this:

You need to wrap it around

$(document).ready(function()({});

to load the function when page is ready

and/or

$(window).resize(function(){});

to load the function on page resize.

Also I would use $('.first-image').css('margin', '0 auto');

answered Nov 7, 2013 at 19:59

Ben Dubuisson

75713 silver badges38 bronze badges

2 Comments

Naomi K Over a year ago

hello, thank you for your response. I do have the $(document).ready but i also have other code in there which is why i did not include it here. IF i use this then i do not need if statement? Thank you!

Ben Dubuisson Over a year ago

you do but I think the CSS way is probably best

Collectives™ on Stack Overflow

how to use jquery to add css based on screen width

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related