Please have a look at: products
At the bottom of the page’s code I have a script that makes the height of the three panels the same; works fine as you can see. BUT I am struggling to find a method to align the buttons with the bottom of each panel.
Thoughts?
-SiP
Hey,
Did you try to place the read more button into the footer area of the panel?
Thanks @Eldar
Yeah, unfortunately the footer doesn’t seem to like buttons (with or without the default header); the button’s positioning hangs its lower bounds below the bottom of the panel.
I have even tried putting the buttons in there own div and setting a class like:
position: relative;
bottom: 0px;
but no success. Driving me nuts!
I have accomplished similar things in the past using the position property and the only thing I can figure is that’s not working here because my script is sizing/drawing the panels after the page loads.
So… nevermind, I fixed it using the old fashioned way.
Hi @ScottinPollock I’m curious how you did your version.
I made a simple solution described in my images with the same script as you.
Getting the button inside that div was insanely hard 
The only problem is in mobile view, then i’d like to have the even panel script not to do its thing since it looks strange.
Maybe some script guru can exclude it for the mobile view?
In the web browser:
How i did it.
Cheers
You need to wrap even-panel in a media query to occur for screen widths greater than 768px.
Thanks… @Jakerlund that would have certainly worked. Dunno why I didn’t think about applying the class to the panel body instead of the entire panel. Good catch!
To disable in mobile just wrap the contents of the function with:
if (window.innerWidth > 768) { }
Well (c; I old schooled it; editing the copy so they all wrap to the same text height at the three breakpoints.I just got tired of futzing around with it and pulled out a bigger hammer. I’ll probably revisit your panel approach again down the road as I have another page on that site with a similar aesthetic.
