Wed, 2013-10-30 17:32
I'm working on a website and I made an example of the problem i have here
http://codepen.io/avovk/pen/pFkmb
It's a 600 page div and the two purple borders that are on the left and right sides are created by setting negative positions on their respective sides. When I drag the browser window to make the page 600 pixels wide or less, the left border disappears, but if i scroll to the right, the right border is still visible. I would like the two borders to only be visible when the page is 600 pixels or wider otherwise the user shouldn't be able to see the right border by scrolling to the right. Kind of like how the left border disappears. Also if the page width is 610px then there should only be 5px of both side of the border visible.
Yes the borders have to be Divs because they're images in my actual website and I would like to do this without javascript.
Thanks,
Alex
Wed, 2013-10-30 22:58
#1
Hi alex3oo2, Have you looked
Hi alex3oo2,
Have you looked into @media queries
Something like this should get you started.
@media screen and (max-width: 600px) { #leftBorder,#rightBorder{ display:none; } }