AlexHatcher Posted June 21, 2022 Share Posted June 21, 2022 (edited) Site URL: https://www.alxhtchr.com/vault-2 I've created a portfolio grid gallery and worked the code so that it has 1 column without left or right padding; however, I've been trying for hours to find code that will allow the row to be cropped vertically to 50% of the page (if I were to have 2 rows and header hidden you could see their entirety). I want the aspect ratio to be variable so that as the browser window size changes, so does the crop on the photo to remain at 50% of the vertical height. The code I attached in the image has not successfully worked in limiting the row height. I'm looking to imitate this page https://www.shortstache.com/professional Here is my page https://www.alxhtchr.com/vault-2 Would appreciate any help I can get, thanks! Edited June 21, 2022 by AlexHatcher Link to comment
tuanphan Posted June 22, 2022 Share Posted June 22, 2022 Use this code <style> @media screen and (min-width:768px) { .portfolio-grid-overlay .grid-item { padding-bottom: 20% !important; } } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
AlexHatcher Posted June 22, 2022 Author Share Posted June 22, 2022 5 hours ago, tuanphan said: Use this code <style> @media screen and (min-width:768px) { .portfolio-grid-overlay .grid-item { padding-bottom: 20% !important; } } </style> I used this code and it seems to change the aspect ratio but it doesn't make it relative to the screen size. I attached a few images of the site I'm trying to imitate at a couple of different window aspect ratios to accentuate the perks of the design I'm trying to achieve. Here you can see the image crop changes to fit the 50% vertical height (disregard the additional height of the header which disappears when you scroll) and the full width of the page at all times. Check out https://www.alxhtchr.com/vault-2 to see how the applied code affected the site. Thanks for all the help, this is still the biggest step I've made in the right direction! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment