change css value depending on browser width

Question

i really need some help with this:

i have a div container #green (green border) with a bg image. the div is on 100% width and the bg image with css3's -cover-. In this div is another div #red which has a position absolute and right value. i want force the #red div to have always the same distance between a motive of the bg image. means if im scaling the browser window the gap should always be the same. my try was to divide the #red { right: 25px } css by $(window).width() and use this factor for

var factor = 0,253;
var width = $(window).width()*factor;

('#red').css('right', width);

but it does not work. hope you get my point, and every help would be much appreciated :)

I guess being an architect didn't work out for you, huh?

icanc
– icanc

2013-02-16 19:57:46 +00:00
Commented Feb 16, 2013 at 19:57 — icanc
– icanc, Commented Feb 16, 2013 at 19:57

John Conde · Accepted Answer · 2013-02-16 19:58:27Z

2

Use media queries:

@media (min-width:500px) { … }

answered Feb 16, 2013 at 19:58

John Conde

220k100 gold badges464 silver badges504 bronze badges

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

5 Comments

John Conde Over a year ago

See this tutorial to see how to use it

supersize Over a year ago

thanks, but really, whats wrong with my method to do it? i mean i dont want it responsive on resize. just when the site loads... what am i doing wrong?

John Conde Over a year ago

Media queries work both ways (which is how you should want it to be). If you want it to only work on load then you'll be limited to a JavaScript only solution.

supersize Over a year ago

yeah but thats the point! its okay to use js only, but look at my example, do i have a logical fault?

supersize Over a year ago

okay it works with lefti dont know why, but it does! thank you anyway for your effort :)

charlietfl · Accepted Answer · 2013-02-16 20:00:53Z

0

var factor = 0,253 is invalid syntax

SHould be

var factor = 0.253;

Use a browser console to check errors, this would pop right out

answered Feb 16, 2013 at 20:00

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Collectives™ on Stack Overflow

change css value depending on browser width

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related