Docs

[teerik]

I have a problem with card elements on my website. Those look nice on desktop and mobile phone but on tablet size devices the images jump here and there and header texts are too wide. Is there some way to make these scale down nicely? I tried setting image widths by pixels or percentages. The header font is quite big and at least one text should be hyphenated because it is so long word. I tried adding CSS but no luck. Smaller font would be ok if hyphenation would not work.

PS. Also if there is a solid way of auto playing banner video on mobile devices it would be awesome. I implemented a workaround to make it play through the link below, which is only shown for smaller size screen sizes (mobile devices). I don’t want to show controls on that banner video.

[teerik]

This reply has been marked as private.

[Jack]

Hi there @teerik,

Thanks for writing in!

I’ve tried to take a look at this for you, but there are mulltiple content overlapping issues on all screen sizes (screenshot attached, the first is a desktop and the second is a tablet).

Can you please provide wp-admin login details in a private reply please and try removing any custom CSS added in case this is conflicting.

Thank you!

[teerik]

This reply has been marked as private.

[Thai]

Hi There,

To fix this issue, please add the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 979px){
    .x-card-outer .x-face-title {
        font-size: 15px;
    }
    .x-face-graphic img {
        width: 100% !important;
        height: auto;
    }
}

Hope it helps 🙂

[teerik]

Thanks, it’s now much better. Still couple of issues as you can see from the attachment (screenshot from iPad):

1) content of cards are vertically out of their place (vertically centered on the card is not a nicest looking, but the content should be starting from top)
2) two images don’t show for some reason

[Christopher]

Hi there,

Please add this CSS as well:

@media (max-width:120px) and (min-width:767px){

.x-card-outer.center-vertically .x-face-inner:before {
    height: auto;
}
}

Hope it helps.

[Kim g]

Hi there-

Here is my website:
http://prosperaslove.com/

I tried this code and also this:
@media (max-width:860px) and (min-width:767px){
.x-card-inner {
height: 289px !important;
}
}

Nothing seems to work for iPad portrait OR landscape mode. Here is an image of portrait mode:
Front: http://prosperaslove.com/wp-content/uploads/2016/08/IMG_0097.png

BACK: http://prosperaslove.com/wp-content/uploads/2016/08/IMG_0098.png

Please advise and thank you as always

[Rupok]

Hi there,

Your CSS is working fine on my end – http://prntscr.com/c69d2o

Let’s check clearing your cache. And make sure to check within 767px – 860px as you have defined this on your media query.

Thanks!

[Kim g]

The front image is being cut off. Check your screenshot against this on desktop:
http://prosperaslove.com/

The images are being cut off, not resized.

The back of the image with the words does seem to be ok now.

Please advise

[Rupok]

Hi there,

You need to use background-size: 100% auto; within the media query to prevent cut off :

@media only screen and (min-width: 767px) and (max-width: 1023px) {
.blueprint .x-face-outer.front, 
.prosperity-press .x-face-outer.front,
.podcast .x-face-outer.front {
  background-size: 100% auto;
}
}

Hope this helps.

[Kim g]

This didn’t change anything…maybe I am putting in the wrong place? I put it in the custom CSS in customizer. Is “media query” a different place?

[Rupok]

Hi there,

Yes you need to place this under Custom > CSS in the Customizer. Make sure other codes are closed properly because unclosed code will prevent the other code to be generated properly. I have tested the code on your site and should work fine. You can try updating a bit though :

@media only screen and (min-width: 767px) and (max-width: 1023px) {
.blueprint .x-face-outer.front, 
.prosperity-press .x-face-outer.front,
.podcast .x-face-outer.front {
  background-size: 100% auto!important;
}
}

Thanks!

[Kim g]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for the updates! This is what happen to your card:

Your card is using a custom css that place a background image. Please keep in mind the a background image behaves differently compared when an image is used as an image element within the card element. To fully understand how background image work, please check out this topic: https://community.theme.co/forums/topic/section-background-image-2/#post-691126

If you want to resolve this issue, please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 979px){
  .blueprint .x-face-outer.front,
  .prosperity-press .x-face-outer.front,
  .podcast .x-face-outer.front {
    background-size: contain;
  }
}

Hope this helps.

[Author]

Posts