christined

UPDATE: I think I have fixed both of these issues using this code in my pages' header injection: <style> @media only screen and (max-width: 800px) { .gallery-masonry .gallery-masonry-item img, .gallery-masonry-wrapper.gallery-masonry-list--ready, .gallery-masonry-item-wrapper { width: 100% !important; height: auto !important; }} @media only screen and (max-width: 800px) { figure.gallery-masonry-item { transform: unset !important; width: 100% !important; padding-bottom: 25px !important; position: relative !important;}} </style> Found the information here: https://www.ghostplugins.com/free-plugins/1-image-per-row-on-mobile-grid-gallery-masonry

In case it can help someone else -- I solved my issue with suggested solution in this post:

Just in case it can help anyone else, I solved my issue with help implementing solution in this post:

Hi, @tuanphan. Thanks for your reply. I solved this issue with help from someone in another post. I did just reply to another post of yours about a separate issue with Mobile padding and image width on that "Installs" masonry gallery, in case you have any ideas about that. 🙂 Thanks for being such a present and helpful member of this community!! Your posts have helped me countless times.

Hi, @tuanphan I am troubleshooting the same issue. I have two pages with masonry galleries. This solution worked great on one page, https://www.angelaart.net/work But not on this page https://www.angelaart.net/work. Can't figure out why. pw: angela Also, Another issue I have on both of these galleries on mobile is that some of the images are not full width. (See screenshot_). Any idea what could be causing that? Thanks in advance for any help anyone can offer! Christine

@Beyondspace you are my hero today! Both of your suggestions are working. I so appreciate your help! 🎉

It worked perfectly! THANK YOU SO MUCH, @Beyondspace!

I implemented footer injection script shared in this thread but am getting inconsistent results with nav showing on right side -- it is either hidden or in wrong color, and varies from page-to-page, whether or not I am logged in, and between Safari and Chrome. I currently have this in footer injection: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> <script> jQuery(document).ready(function($){ $('.header-display-desktop nav.header-nav-list').clone().insertAfter('.header-actions.header-actions--right>.showOnMobile'); }) </script> <style> .header-display-desktop .header-actions--right .header-nav-list .header-nav-item:nth-child(-n+2) {display: none;} .header-display-desktop .header-title-nav-wrapper .header-nav-list .header-nav-item:nth-child(n+3) {display: none;} .header-nav-item:nth-child(n+2) { margin-right: 4vw; } </style> And these screenshots show the two nav items on right either missing or in black. (Interestingly, on the pages where the words News and Commissions aren't visible, I can still click that area and link to the page... words just don't show.) The site is: angelaart.squarespace.com pw: angela I sincerely appreciate any advice anyone can share! Christine

Hi, all. I asked this last week in a resolved thread and am thinking maybe I need to create a new post ... I have experimented with various versions of CSS code to implement a hover caption on masonry grids in 7.1. Had best luck with code in this thread, but I have a couple issues -- when I am not hovering over image, I can see a faint/small version of the caption on the image (see screenshot) Mobile - I know hover doesn't work on mobile screens. Struggling to figure out CSS so that always displays caption (beneath image) on mobile. I am using Masonry Grid in portfolio pages. angelaart.net/work pw angela Any advice for how to tweak my css to resolve these things? Thanks for any help you can offer! Christine

Hi, all. I implemented the CSS in this thread but have a couple issues - when I am not hovering over image, I can see a faint/small version of the caption on the image (see screenshot) Mobile - I know hover doesn't work on mobile screens, so what CSS do I need to add to always display caption (beneath image) on mobile? I need a I experimented with several solutions found on various posts, but don't have it working yet. I am using Masonry Grid in portfolio pages. angelaart.net/work pw angela @Ziggy, anyone -- have any advice for how to tweak my css to resolve these things? Thanks for any help you can offer! Christine

Hi, @tuanphan. I am having same problem as @tevesudios. I implemented footer injection script you shared here but am getting inconsistent results with nav showing on right side -- it is either hidden or in wrong color, and varies from page-to-page, whether or not I am logged in, and between Safari and Chrome. Should I also have some CSS to support that script? Thanks for any help you can offer! Christine angelaart.squarespace.com pw: angela

Thank you so much, @tuanphan! This worked! 🎉

I would love help with code for 7.0 to change logo on one page. https://pacedevelop.com/custom-homes I attempted with code I found in a couple tutorials but not working. Client is on a legacy plan (Professional) — that level allows CSS, but still wonder if that could be part of problem. thanks very much!