-1

This is my first post here :)

I'm very new to web development, I actually didn't really know anything just some days ago when I decided to start building a new website for my band. So please don't blame me if the code isn't the best, for now I want the website to look nice and to work well for any screen resolution (=> 1920x1080 and smartphones) So far I've been able to achieve everything I wanted, but now I'm stuck after trying the whole day:

Please take a look at this site http://www.unstucc.de/test/band_site_for_stackoverflow.html (it's the current snapshot of what I've achieved so far)

If you disable javasript and horizontally resize the browser, you'll see that those "boxes" for every band member move so they're always fully visible. You never have to scroll horizontally, except if your screen is really small. If you enlarge the browser horizontally and there's enough space on the right for another "box", the next "box" jumps up one row. I like this behavior and I want to keep it. But masonry destroys this behavior, as you can see if you enable javascript. To see the band member positioned on the right, you have to scroll to the right horizontally. How can I configure masonry to respect this intended behavior, but still do its magic in positioning the "boxes" right? I'd like to have masonry position them right, because it looks a lot better, since the "boxes" don't have the same height.

I hope my description is clear enough, english isn't my mother tongue.

Army
  • 1

1 Answers1

0

Your absolutely positioned

<div id="left">

pushes the entire Masonry container

<div id="band_right">

to the right off screen, hence the necessary scrolling. If you always want that "CD cover/social networking icons" element to appear top left, use the simple Masonry left corner stamp trick: Make that element your first .masonry-brick and then get rid of these

left: 420px;

on your Masonry container CSS, then it will work. Just disable left: 420px; in Chrome's devtools and you'll see, what I mean.

Systembolaget
  • 2,494
  • 2
  • 18
  • 37