1 reply [Last post]
alex3oo2
alex3oo2's picture
Offline
newbie
home
Last seen: 8 years 34 weeks ago
home
Timezone: GMT-4
Joined: 2010-03-14
Posts: 4
Points: 7

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

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 3 weeks 3 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

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;
  }
}