addisonpann

I would like the nav dropdown menu to be the width of the title of the folder title (Case Studies), not the folder contents, with a bit of padding on either side. Any idea how I would do that? Site URL: http://addisonpann.com

I tried this to no avail. Site URL: https://addisonpann.com/greenslate Any idea why?

Using Chrome's dev tools, I found that the z-index for back-to-top was indeed 9, despite having set the z-index of the button to 999. I was able to achieve the effect I'm looking for by targeting the code block with the HTML that generates the back-to-top button. The button was inheriting its z-index from the code block.

The back-to-top must be inheriting its z-index from somewhere. I set it to 999 with... z-index: 999 !important; ...and it's still stuck below the lady icon. Why would changing the z-index work for you but not for me?

Site URL: https://addisonpann.com/greenslate I made a "back to top" button with a code block and CSS. It floats in the bottom right of the screen and is hidden beneath the top couple sections of the page so that it "appears" after the user has scrolled down some. On mobile, the button is hidden beneath images and shapes, despite having a much higher z-index than almost anything else on the page. Any idea why this might be?

I added your code to my site, and it's a step in the right direction, but it isn't quite right. It hides a portion of my first section's image under the header. Any idea why that would be? https://addisonpann.com/greenslate

I did not. I'll probably post a request for help in the near future once I've finished with some other stuff.

Oops. Thanks for that. What should my targets be instead of the following? body.homepage div#site { padding-left: 0px !important; padding-right: 0px !important; } body.homepage div#canvas { max-width: 100% !important; } body.homepage { overflow-x: hidden; } body.homepage section#page { max-width: 100% !important; }

I've tried this on my site to no avail. Any chance you could assist me too? https://www.addisonpann.com/greenslate I'm trying to make the hero banner full bleed across the width of the page. Thanks!

Site URL: https://www.greenslate.group/ Site password: toast I want to change the section height of the hero banners on all pages of my site (Portfolio, About, and Services, as they are the only ones with hero banners). They're set to Medium height in the Format menu, which I like for desktop, but I want them to be Small height when viewing the page on a mobile device. Apologies in advance if there is already a thread that solves my issue; I looked, but none of the resolved threads were quite what I am looking for. Thanks!

Yes, apologies. https://gardenia-blenny-f8sl.squarespace.com/portfolio Password: toast

Hi, friends. I'm attempting to remove the zoom effect that occurs when hovering over a portfolio grid image. Go to Portfolio from the nav bar and scroll down to "Recent Work." When you hover over the image for "Pebble House" you'll see the animation I'm trying to get rid of. Thanks in advance for any and all assistance!

Site URL: https://addisonpann.art password: toast Using code provided by these forums, I have been able to initiate a caption overlay on masonry grid images upon hover. It works like a charm on my Graphic Design page, but the Hand Drawn page's captions appear dimmed, and I'm thinking they may be below the partially-transparent overlay. Here's the CSS I'm using: /* ------- GALLERY CAPTIONS --------*/ .gallery-caption-grid-masonry p.gallery-caption-content { font-family: "Helvetica Neue", sans-serif; font-size: 2vw !important; font-weight: 500 !important; text-transform: uppercase; line-height: 1.2em; color: #E19D9D; margin: 1.5em !important; } /*---- CAPTION HOVER OVERLAYS ------*/ .gallery-caption-grid-masonry { opacity: 0; z-index: -1; transition: all .2s; position: absolute; top: 50%; transform: translateY(-50%); left: 0; text-align: center; color: #fff; height: 100%; max-width: 100vw; padding: 0; } .gallery-masonry-item:not(.has-clickthrough) .gallery-caption-grid-masonry:before, .gallery-masonry-item a:before { background-color: rgba(0,0,0,.5); content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 999; opacity: 0; transition: all .5s; } .gallery-masonry-item.has-clickthrough:hover .gallery-caption-grid-masonry { z-index: 999999; opacity: 1; height: auto; } .gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry { z-index: 0; opacity: 1; pointer-events: none; } .gallery-masonry-item:hover .gallery-caption-grid-masonry:before, .gallery-masonry-item:hover a:before { opacity: 1; transition: all .5s } .gallery-caption-grid-masonry .gallery-caption-wrapper { display: flex; align-items: center; justify-content: center; text-align: left; } .gallery-caption-grid-masonry p.gallery-caption-content { z-index: 1000; font-size: 2em; font-weight: 400; margin: 2vh 2vw; } .gallery-caption-grid-masonry p.gallery-caption-content { z-index: 1000; } I'll admit I haven't used z-index much in the past, and I'd imagine the issue stems from that. Why do the captions display correctly on the Graphic Design page, but not on Hand Drawn? Thanks in advance!

For anybody stumbling across this later on, I managed to make it work. The overlay displays while the images underneath are clickable. Here's the code I used: .gallery-masonry-item:not(.has-clickthrough):hover .gallery-caption-grid-masonry { z-index: 0; opacity: 1; pointer-events: none; } (That's the only thing I changed since my previous post asking for guidance)