Caption font size problem on iphone

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

I've checked your site on my phone (iOS Safari) but have not found any issue:

Please check again on the private/incognito mode.

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

i see no change on iphone with this code sorry

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please modify the previous code like this:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {     
    body .penci-featured-caption,
    body .wp-caption p.wp-caption-text {
        font-size: 10px !important;
        margin-top: -10px;
    }
}

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

ok sorry

i send you a video has you can see there is a bug when we scrool up (size reduce and grow)...

further more, in android this code make caption very very small?

Thanks

Rboullay replied

4 years ago

Customer Reply

it workkssss!!!!!

thanks

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please try to replace it with this CSS code:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {     
    body .penci-featured-caption,
    body .wp-caption p.wp-caption-text {
        font-size: 5px !important;
        margin-top: -5px;
    }
}

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

Hello

Sorry it doesnt work

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please try to add the following code to your site:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    .wp-caption p.wp-caption-text {
        font-size: 5px !important;
        margin-top: -5px;
    }
}

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

print screen sorry

Rboullay replied

4 years ago

Customer Reply

ok ok i have paste your code and look

same problem

Rboullay replied

4 years ago

Customer Reply

sorry with print screen

Rboullay replied

4 years ago

Customer Reply

it is done

it doesn't solve the problem

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Let's check the code I've sent:

@media only screen and (max-width: 767px) {
    .wp-caption p.wp-caption-text,
    .penci-featured-caption {
        font-size: 10px !important;
        margin-top: -5px;
    }
}

This is contain the max-width: 767px.

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

look

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

You should clear all the site cache, because I'm searching the site source code but still not found the code I've sent.

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

yes the code is there

It was already there before your answer

!important don’t solve problem

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

I've checked your site and not found the code I've sent on this reply: https://pencidesign.ticksy.com/ticket/3121608/#comment-16728313

Have you added this to your site?

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

has i wrote before it is not the featured caption the problem

But all others captions

Look same page under another image please

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Here is a screenshot of your site on my phone, the image caption display the same as your custom CSS.

You should check your site on private windows.

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

i v already done that and it doesn't work

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

You can modify the CSS code like this:

@media only screen and (max-width: 767px) {
    .wp-caption p.wp-caption-text,
    .penci-featured-caption {
        font-size: 10px !important;
        margin-top: -5px;
    }
}

Regards,
PenciDesign.

Rboullay replied

4 years ago

Customer Reply

i know it works but not on iPhone ?

Look not the featured caption but thé others please you will see like my screen shot

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

The custom CSS you've already applied to the caption images on mobile, here is a screenshot:

Please clear all the browser cache & check again.

Regards,
PenciDesign.

Rboullay started the conversation

4 years ago

Conversation Start

Hello

sorry another problem

i ve set this code in order to change size font of caption images

.wp-caption p.wp-caption-text, .penci-featured-caption {
font-size: 10px !important;
margin-top: -5px;
}

my problem is that it dind't work on iphones??