christined

4 hours ago, christined said:

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

 

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:

On 3/25/2024 at 3:26 AM, tuanphan said:

I see you solved? I checked on some pages and all are fine

https://angelaart.squarespace.com/news. 

Yes, thank you! I did solve it! I very much appreciate your attempt to help.

 

On 3/25/2024 at 5:11 AM, tuanphan said:

For masonry under Installs text?

I see you disabled Gallery Caption, can you enable it & add some captions? Then we can check problem easier

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.

On 4/14/2020 at 11:02 PM, tuanphan said:

Add to Home > Design > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="5e94c4503f49493c11a99fff"] figure.gallery-masonry-item {
    margin-top: 10px;
    margin-bottom: 10px;
}
}

 

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! 🎉

18 hours ago, Beyondspace said:

 

You can try the following code to overwrite it

.header-nav-item.header-nav-item--collection  a {
  opacity: 1;
  color: var(--solidHeaderNavigationColor);
}

Hope it can 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. 
   

Hi, all. 

• 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. 

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!