elijah_aaron Posted September 19, 2021 Share Posted September 19, 2021 Site URL: https://abba.squarespace.com/gallery Hello my friends, I have a large image gallery of over 100 images. Each image is in a separate code block; arranged in a 3 by 3 grid. Can I even them out somehow? I'm hoping it will do that naturally when I add titles and the "add to cart" button under each. Obviously I would prefer a standard photo gallery, but this is the only way I can incorporate my external ZOOM script with an add to cart option under each picture. It's a bummer, but I'm really hoping I can do one sweeping line of code to level / even out all my code blocks. Here is how it looks: https://abba.squarespace.com/gallery PASSWORD: square Link to comment
tuanphan Posted September 20, 2021 Share Posted September 20, 2021 Password incorrect Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
elijah_aaron Posted September 21, 2021 Author Share Posted September 21, 2021 Oops, made it public. Try now 🙂 Link to comment
tuanphan Posted September 24, 2021 Share Posted September 24, 2021 On 9/21/2021 at 2:37 PM, elijah_aaron said: Oops, made it public. Try now 🙂 It looks like you solved? I see fine here Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Beyondspace Posted September 27, 2021 Share Posted September 27, 2021 On 9/21/2021 at 2:37 PM, elijah_aaron said: Oops, made it public. Try now 🙂 Same with tuanphan, it looks fine BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
elijah_aaron Posted December 28, 2021 Author Share Posted December 28, 2021 It's still not level on some of the pages... like here.. abba.squarespace.com/gallery-page-7 Link to comment
tuanphan Posted December 29, 2021 Share Posted December 29, 2021 17 hours ago, elijah_aaron said: It's still not level on some of the pages... like here.. abba.squarespace.com/gallery-page-7 You mean, you want to align title/quantity/buttons? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
elijah_aaron Posted December 30, 2021 Author Share Posted December 30, 2021 @tuanphan Yes, I'd like everything even (all photos and all titles, prices, quantities and add to cart). I'd hate to have to re-size all images and re-upload... there are 100. Link to comment
tuanphan Posted January 1, 2022 Share Posted January 1, 2022 On 12/30/2021 at 9:25 PM, elijah_aaron said: @tuanphan Yes, I'd like everything even (all photos and all titles, prices, quantities and add to cart). I'd hate to have to re-size all images and re-upload... there are 100. Add to Design > Custom CSS /* Gallery page align */ @media screen and (min-width:901px) { a.product-title { display: block; min-height: 60px; } } @media screen and (max-width:900px) and (min-width:641px) { a.product-title { display: block; min-height: 90px; }} Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
elijah_aaron Posted January 2, 2022 Author Share Posted January 2, 2022 @tuanphan That didn't seem to help... I have the following code in the header of each gallery page.. maybe it's messing something up? <style> .product-block .productDetails .product-title { font-family: 'scrubby', alternative-web-safe-font; font-weight: 400; font-style: normal; letter-spacing: 0em; text-transform: uppercase; line-height: 1.4em; font-size: calc(.24vw + 1rem); padding: 0 } </style> The only other thing I can think of, is that some of the image sizes are different. Is there a way to tell them all to be the same dimensions? I'll do whatever I need to do... Even if it means re-uploading all 100 images. I just need everything on the pages to be perfectly aligned and neat. As a friendly reminder, all the images on these pages are via code blocks. abba.squarespace.com/gallery Link to comment
tuanphan Posted January 4, 2022 Share Posted January 4, 2022 On 1/2/2022 at 5:51 PM, elijah_aaron said: @tuanphan That didn't seem to help... I have the following code in the header of each gallery page.. maybe it's messing something up? <style> .product-block .productDetails .product-title { font-family: 'scrubby', alternative-web-safe-font; font-weight: 400; font-style: normal; letter-spacing: 0em; text-transform: uppercase; line-height: 1.4em; font-size: calc(.24vw + 1rem); padding: 0 } </style> The only other thing I can think of, is that some of the image sizes are different. Is there a way to tell them all to be the same dimensions? I'll do whatever I need to do... Even if it means re-uploading all 100 images. I just need everything on the pages to be perfectly aligned and neat. As a friendly reminder, all the images on these pages are via code blocks. abba.squarespace.com/gallery Did you add to Custom CSS or Page Header/Code Injection Header? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
elijah_aaron Posted January 4, 2022 Author Share Posted January 4, 2022 @tuanphan I added what you sent to custom CSS and the above code into the header of each gallery page. Do I need to resize and re-upload each image? Is there a way to tell the images to all be the same size? They are all in code blocks as follows... <a href="https://static1.squarespace.com/static/5fc0b562d49dd12447332220/t/5fdf86cb42c0045a331139c2/1608484559781/Absolutley+YES+-+Paul+Palnik.png" class="MagicZoom"> <img src="https://static1.squarespace.com/static/5fc0b562d49dd12447332220/t/5fdf86cb42c0045a331139c2/1608484559781/Absolutley+YES+-+Paul+Palnik.pngformat=750w 988h"></a> I tried to used "format" to adjust the size of each but it doesn't seem to work... 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