Docs

[cece101]

http://www.buildmywordpresswebsite.com/cloudsolutions/

See attached pics for mobile issue. In one image you can see the text is getting cutoff. In the other image when you flip a card it overlaps with the one above it. Not a problem on a computer screen just mobile.

Thanks.

[Christopher]

Hi there,

I would like to check your site but it’s under construction mode, please provide us with login credentials.

Thanks.

[Rue Nel]

Hello There,

Thanks for writing in! When I was trying to visit your site, I see this: http://prntscr.com/ciyrt8

It seems that your server is down or the site is temporarily not available. Please call assistance from your hosting provider first and let us know so that we can check your card elements in your page.

Thank you.

[cece101]

This reply has been marked as private.

[Lely]

Hi There,

Thank you for the credentials. Please also try adding this custom CSS:

@media (max-width: 480px){
.page-id-213 #x-section-4>div .x-card-outer .x-card-inner {
    min-height: 470px !important;
}
.page-id-213 #x-section-4>div+div .x-card-outer .x-card-inner {
    min-height: 300px !important;
}
}

Hope this helps.

[cece101]

I added the code but the edges of the flip cards still touch on mobile – agility touches protection and protection touches 24/7/365.

Cheers.

[Nabeel A]

Hi again,

Please add the following code in your Customizer:

@media screen and (max-width: 767px) {
    .page-id-213 #x-section-4 .x-card-outer .x-face-outer {
        min-height: auto !important;
    }
}

Let us know how this goes!

[cece101]

This reply has been marked as private.

[Joao]

Hi There,

There is a missing } on your first media query.

Please change this part of the code from :

@media (max-width: 480px){
.page-id-213 #x-section-4>div .x-card-outer .x-card-inner {
min-height: 470px !important;
}
.page-id-213 #x-section-4>div+div .x-card-outer .x-card-inner {
min-height: 300px !important;
}

@media screen and (max-width: 767px) {
.page-id-213 #x-section-4 .x-card-outer .x-face-outer {
min-height: auto !important;
}
}

To:

@media (max-width: 480px){
.page-id-213 #x-section-4>div .x-card-outer .x-card-inner {
min-height: 470px !important;
}
.page-id-213 #x-section-4>div+div .x-card-outer .x-card-inner {
min-height: 300px !important;
}
}

@media screen and (max-width: 767px) {
.page-id-213 #x-section-4 .x-card-outer .x-face-outer {
min-height: auto !important;
}
}

Hope that helps

Joao

[cece101]

Thanks! That did help.

[Paul R]

You’re welcome! 🙂

[cece101]

That does help a bit but now the bottom 3 cards touch each other on smartphone viewing.

[Rad]

Hi there,

Hmm, not happening on my end. But I do see larger gap due to this

.page-id-213 #x-section-4 .x-container:first-child {
    margin-bottom: 50px !important;
}

Would you mind providing some screenshots of what you’re getting?

Thanks!

[cece101]

This reply has been marked as private.

[Rad]

Hi there,

What’s the version of your browser? It works on my test and on other devices.

Thanks!

[Author]

Posts