How to make compact albums responsive
-
I cannot, for the life of me, figure out how to make my compact albums responsive so that they scale down in size along with the size of the browser window, specifically between screen size min-width: 768px and max-width: 977px while also keeping the group of 3 .ngg-album-compact elements centered within the .ngg-albumoverview.
In the media query I made the width of .ngg-album-compact a percentage as well as .ngg-album-compactbox .Thumb (image). They both scale with the size of the browser window as expected.
However, the margins are not cooperating. I too set the margins to percentages but no matter what value I give the left or right margins, at some point the layout breaks and the third .ngg-album-compact gets pushed down below to prior two. It’s as if the margin percentages are not maintaining their proportionality to the .ngg-albumoverview element. This is not making sense to me.
Has anyone else looked into do this and found a solution to keeping these elements centered while scaling? Any advice would be greatly appreciated.
You can see one of the pages I’m working on at https://www.ginnyjohnsonphotography.com/portfolio/animals-album/.
I thank you in advance.
- The topic ‘How to make compact albums responsive’ is closed to new replies.
