Button disappears on mobile

Hi Erika,

On your child theme, you have this CSS:

@media (max-width: 768px){
.contact-box-wrapper {
    align-items: center;
}
}

It's affecting how the TeamViewer button is displayed because the image is set as a background photo and you've set the element to have a percentage width.

There are a few options we can do here.

We can either:

- remove this CSS so we maintain the align-items: stretch to cascade down from desktop to mobile.
- or change the TeamViewer button to have an actual <img> as a button instead of adding the image as a background image.
- or assign a fixed width on the TeamViewer button.

Hi Elvin,

thank you for the ideas.

I played around quite a lot with it.

First I changed the code of the widget, and added the image as image as suggested. Adjusting the button on mobile worked, however I have lost a very important feature by this change: I could not change the image on hover this way. That was bad.

I have been looking for a solution, but couldn´t figure out how to use a different image on hover if I add the images as image and not as backgorund.

Due to the fact that on hover only the colors needed to be changed, finally I turned the pgn into a svg and applied filters to set the color of the button. It works with the limitation that I could not set the blue color as a background on hover.

However, with my standing of knowledge that was the closest solution I could get.

Anyway, I have the question how you would have gone about adding the image and keeping the option of a second image on hover. Is there a tutorial on it (I couldn´t find any)?

Thanks, Erika

Hi there,

looks like you found a solution ? Is that right ?

Hi David,

basically yes, by a completely different approach. However, I could not set the color of the button background to #0072c7 on hover with this method, because the filter also applies to the background. Therefore it is still a question whether
1) it is possible to set the filters a way, that the button has a white background and #0072c7 for the logo in normal way and that the colors swicht on hover (white logo and #0072c7 background) - just thought about the not: selector. Could I apply the not: selector somehow to the backgorund, so the background does not get the filter applied on hover and then assign the color to the background? OR
2) how the solution would have been unsing two background images for the button normal and on hover

Thanks, Erika

I would move the sizing, border and background color to the parent container ie. contact-box-3 and apply styling downwards like so:

.contact-box-3 {
    border: 1px solid #0072c7;
    border-radius: 4px;
    width: 200px;
}
.contact-box-3:hover {
    background-color: #0072c7;
}
.teamviewer-button {
    vertical-align: bottom;
    padding: 3px;
    padding-right: 10px;
    filter: invert(31%) sepia(44%) saturate(5164%) hue-rotate(189deg) brightness(88%) contrast(101%);
}
.contact-box-3:hover .teamviewer-button {
    filter: invert(1);
}

Hi David,

well, yes! This is it. You know what? Every time you help me, I am most impressed by the final simplicity.

Thank you ;)

Erika

Glad to be of help.
My golden rule with CSS - if it looks like its getting too complicated then its time to start again :)

A good rule, I like it.

its kept me from going insane lol