Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Boris Kamp
Boris Kamp
16,660 Points
Posted by Boris Kamp
Boris Kamp
16,660 Points

Gallery css grid issue

Hi guys!

On this url: http://duijnisveld.wpengine.com/het-bedrijf/een-leverancier-van-staalconstructies-op-maat/ I created a gallery at the bottom of the article. The layout is driving me nuts, I get Wordpress to echo out two image sizes: 500x500 1000x500

the 1000x500 size is for every fifth loop item in my gallery.

I put a padding on each .galerij-item of 5px, but the 1000x500 image has a different height, I have no clue how come, I've been searching for ages now and can't seem to find it, what's wrong with this?

I really hope you guys see something I overlooked

thanks!

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Ok, removing my answer. Hope you get it fixed! Will be interesting to know what the fix was :smiley:

1 Answer

Joel Bardsley
Joel Bardsley
31,249 Points
Joel Bardsley
Joel Bardsley
31,249 Points

Hi Boris,

This issue particularly interested me so I've ended up creating a CodePen to document the issue and provide a couple of solutions. Just in case you're not 100% familiar with CodePen, to access the code click the 'Change View' button and select 'Editor View'.

Hopefully it's of some help.

Boris Kamp
Boris Kamp
16,660 Points
Boris Kamp
Boris Kamp
16,660 Points

Hi Joel!

you're a hero for making the codepen! thanks for helping, I understand what you mean.

issue is not solved though, if you change the .container width to 1170px the layout is broken again.

does this mean I have to go with the js solution since it won't work otherwise?

please see this pen

Thanks!

Joel Bardsley
Joel Bardsley
31,249 Points
Joel Bardsley
Joel Bardsley
31,249 Points

Hi Boris,

I see what you mean. I've updated my CodePen (apologies if you were on it while I was doing some trial and error changes!) - I think the js solution is going to be the way to go as the image size ratio does change depending on the container size. I've added a quick ratio calculator to the js code, which logs the result to the console so you can see the difference.

I've also added a 1170px container at the bottom using the js method to show that it would work.

Boris Kamp
Boris Kamp
16,660 Points
Boris Kamp
Boris Kamp
16,660 Points

Hi Joel,

Thanks for the update! I experience responsive issues, don't you? I tried to set the following:

.container.large {
  width: 100%;
  max-width: 1170px;
}

and ended up having the width-2 div with zero height, only padding.

I thinking about moving to background-image css instead of the <img>. I't far easier up until now

Thanks for helping me, I really appreciate it

Joel Bardsley
Joel Bardsley
31,249 Points
Joel Bardsley
Joel Bardsley
31,249 Points

Here's my final attempt with added responsiveness: New CodePen with added responsiveness

I expect it will need tweaking to suit your particular site, but it should help you on your way. You'll notice I've removed the column width classes altogether now and just used CSS nth-child selectors. The JS should be pretty clear - I've added notes for potentially unfamiliar lines as well as values that you may need to change to suit your final layout.

Good luck!

Boris Kamp
Boris Kamp
16,660 Points
Boris Kamp
Boris Kamp
16,660 Points

Hi Joel,

last but best (-:

that works flawlessly! I just mad one minor change to the script to remove the height style if width is under mediaquery width:

$(window).on('resize', function() {
        var windowWidth = $(window).width();

        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            if (windowWidth >= 992) { // set to media query breakpoint
                resizeImage();
            } else {
                targetImg.removeAttr( 'style' );
            }
        }, 250);
    }).trigger('resize');

note the else

two more questions:

  1. why did you use the e in $(window).on('resize', function(e) { if you never use it?
  2. can you elaborate on why you need .trigger('resize'); at the end, just curious why $(window).on('resize', function(e) { does not do the job

Thanks Joel! you solved my problem (-:

Joel Bardsley
Joel Bardsley
31,249 Points
Joel Bardsley
Joel Bardsley
31,249 Points

At one point I logged e to the console to see if there was anything of use in there, and just neglected it after discovering there wasn't!

The .trigger() was one of several options provided in this stackoverflow thread when I was checking for best practices to call the function on page load as well as on window resize.