[Resolved] Remove spacing around mobile buttons AND

[Elizabeth]

Hello,

I’ve just set up some buttons to display on mobile only (a call button and get directions button to replace the links in the top bar which I’ve hidden on mobile) on my home page. I would like them to stack on top of each other but can’t figure out how to remove the spacing in between them. Can you please advise?

Also, I’d like to have a roll-over color overlay on a few images that I’m using as links on my home page, but can’t figure out how to do that within the lightweight grid columns I’ve set them up in. It’s the “sacraments, young adult ministry, and saint benedict school” trio. Can you please point me in the right direction as to what CSS to use and where to put it? Thanks!

-Liz

GP Premium 1.7.8

[Leo]

Hi there,

This should work to reduce the margin:

@media (max-width: 768px) {
    #generate-section-1 .inside-grid-column {
        margin-bottom: 0.5em;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

I don’t think it’s possible to apply a color on static image, but you can try using opacity:

#generate-section-3 .inside-grid-column img:hover {
    opacity: 0.8;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Elizabeth]

Thank you for your prompt reply, that margin CSS works great!

For the image color overlay, I’m trying for a CSS solution (rather than a rollover html image swap solution) something like this:

https://wisdmlabs.com/blog/show-color-overlay-image-hover-using-css/

https://www.w3schools.com/howto/howto_css_image_overlay.asp

Is it possible in GPP?

-Liz

[Leo]

Those solutions aren’t theme specific as they are just HTML and CSS, so it should be the same to implement them in GP and in a default WP twenty series theme 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Elizabeth]

That’s why I’m trying it, but I can’t figure out the right way to implement it within the lightweight grid columns and with the other div I was told by Tom to use to center those three buttons within the columns. When I try it it just makes the background flicker? The grid container is just centering them all but I’m a div newbie and the concept of nesting is throwing me off…

I could use a little more specifics about where to place what, and which method you recommend? I just want to have a transparent color overlay on rollover so you can tell the whole thing is a button.

here’s my html:
<div class="custom-container-width grid-container">[lgc_column grid="33" tablet_grid="33" mobile_grid="100" last="false"]<a href="http://enunziato.com/SBP1B/category/st-benedict-sacraments/"><img src="http://enunziato.com/SBP1B/wp-content/uploads/2018/11/Concept1B_AccentPhoto1.png" alt="" width="260" height="140" /></a><a href="#sacraments">Sacraments</a>[/lgc_column][lgc_column grid="33" tablet_grid="33" mobile_grid="100" last="false"]<a href="http://enunziato.com/SBP1B/youth-young-adults/"><img src="http://enunziato.com/SBP1B/wp-content/uploads/2018/11/Concept1B_AccentPhoto_2.png" alt="" width="260" height="140" /></a><a href="#request-an-appointment">Young Adult Ministry</a>[/lgc_column][lgc_column grid="33" tablet_grid="33" mobile_grid="100" last="true"]<a href="https://www.stbenschool.org"><img src="http://enunziato.com/SBP1B/wp-content/uploads/2018/11/Concept1B_AccentPhoto_3.png" alt="" width="260" height="140" /></a><a href="#request-an-appointment">St. Benedict School</a>[/lgc_column]</div>

-Liz

[Leo]

Using the opacity option I suggested above would be the easier solution and it will also make the picture appear to be a button.

Have you tried it?

If not can you apply the first method exactly (https://wisdmlabs.com/blog/show-color-overlay-image-hover-using-css/) on the live site so we can see?

It’s really tough to read HTML like what you’ve provided above.

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Elizabeth]

Yes, the opacity works, but it’s not the look I’m going for. Right now I have applied the first method and it’s not working either :(, even when I try adding a z-index.

-Liz

[David]

Hi there,

try this CSS:

@media (min-width: 768px) {
    .custom-container-width .inside-grid-column a:first-child {
        position: relative;
    }
    
    .custom-container-width .inside-grid-column a:first-child:before {
        content: '';
        position: absolute;
        top: 0;
        left: 12px;
        right: 12px;
        bottom: 0;
        background-color: rgba(0, 91, 27, 0);
        transition: background-color 0.3s ease-in;
    }
    
    .custom-container-width .inside-grid-column a:first-child:hover:before {
        background-color: rgba(0, 91, 27, 0.69);
    }
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Elizabeth]

Hi David, thanks for jumping in! I hope you are well. I’ve just inserted that CSS and it doesn’t seem to be working. I can’t figure out why none of these will work…

-Liz

[David]

Looks like you changed some things around. But the issue you are having is because some of your CSS has errors. All of the @media queries need a another } to close them e.g you have this:

@media (max-width: 850px) {
    .top-bar {
        display: none;
    }

when it should be this:

@media (max-width: 850px) {
    .top-bar {
        display: none;
    }
}

So any CSS below an error won’t run.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Elizabeth]

Hi David,

I corrected the } error, thanks. But I didn’t change anything else around, other than removing the other code I tried recommended by Leo above..should I put that back in? It’s still not working.

-Liz

[Elizabeth]

Ok so I put the other code back in and it seems to be doing something to the button now, but not the image (the opposite of what I’m attempting, lol). Not sure where to put the span inside the other divs and in relation to the image…

-Liz

[Elizabeth]

Update: it also seems to be affecting every single button on any page that I have in the column grid setup – I just need it to work over the images on the home page…

-Liz

[David]

Remove the SPAN and the other CSS and try the CSS i provided here:

https://generatepress.com/forums/topic/remove-spacing-around-mobile-buttons-and/#post-859973

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Elizabeth]

Yay, it’s working over the images! Now I just need it to not affect all the other buttons, which are still changing their color on hover.

-Liz

[Author]

Posts