stupid css issue. item off screen without scroll

unwashed potato!

unwashed potato!

unwashed potato!

Soldato
Joined
12 Feb 2006
Posts
17,418
Location
Surrey
this is such a silly issue i can't seem to figure out how to stop. i want an arrow off screen and for the page to not scroll horizontal to it, and then if the user has a wide enough browser window it'll show but if not then it's out of view and they wouldn't know.

below you can see the purple arrow to the right hand side and the code

http://www.mayergroup.co.uk/services/

Code: 
#quotegrab2 {
position: absolute;
top: 25px;
left: 300px;
background: url('images/quotegrab2.JPG') no-repeat;
width: 100px;
height: 195px;
}

any ideas? i'm sure i'm missing something so simple. thanks
 
What about using media queries to hide it?

Code: 
@media (max-width: 1190px) {
    #quotegrab2 {
        display: none;
    }
}

Or am I misunderstanding what you're asking?
 
Last edited:
i assume media queries happen on page load and not window size refresh? if so the reason i'm against doing that is simply because i'm someone who resizes my window reguariliy depending on what i'm viewing, so if other viewers were like me and had a smaller window until they viewed my site and then widened it, they'd not see the arrow.
 
Yep, media queries work on page resize.

This is the best way to do it, otherwise you'll get some people who have screen width set at a point where they can see part of the arrow but not enough to work out what it's supposed to be. They also wont be able to scroll to it and see what it is. Will just confuse people.
 
You must log in or register to reply here.
Back
Top Bottom