css grid full width

We have a fullwidth grid on a homepage (design jpg at http://design.dasmedia.be/tsubo/v3/02_tsubo_home) that :
- should align with the logo (check http://design.dasmedia.be/tsubo/tsubo-scr.png)
- should have fixed size images
- should be centered on the page

So depending on the width of the window, the user will see more/less images on a row


Html can be checked at: http://design.dasmedia.be/tsubo/html/tsubo_home.html
Who is Participating?
ads711Connect With a Mentor Author Commented:
3 lines of javascript code solved the problem without any extra plugins :)
Thanks for the answers, though!
Julian HansenCommented:
Without understanding why the page was marked up as it is here is part of your problem
Line 633 of skin.css
.thumbs_row {
  left: -465px;
  position: absolute;
  width: 215%;
  z-index: 0;

Open in new window

You are setting the width of the page to 215% - which is going to cause the problem.

Before changing it the question is why was it styled like that?
ads711Author Commented:
Thank you for your answer!

I realize that's the main issue that needs to be resolved. But I can't figure out another way to achieve the desired result where the third picture of the .thumbs_row div aligns with the logo...

I styled it like this because the pictures didn't want to stay on the same line because they float.
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
I have done this in the past using masonry http://masonry.desandro.com/
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What was the final solution of js code you used?
ads711Author Commented:
window.onresize = function(event) {

function resizePhotoWall(){

var offset = $('.content').offset();
var new_position = 465 - offset.left;
$('.thumbs_row').css('left', -new_position);


Open in new window

ads711Author Commented:
Found the solution myself *yaay*
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.