How can I fix image text overlay overflow on smaller screens?

[mel30]

Hello Experts,

The below image with text overlay overflows when the media screen is below 799 or 499

https://www.athreyaherbs.com/pages/eyelash-brow-serum

How can this be fixed?

I appreciate your help.

[PageFly-Victor]

HI @mel30

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

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

.serum-text-overlay p, .serum-text-overlay h2 {

font-size: 12px !important;

}

.serum-text-overlay p {

line-height: initial !important;

}

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

[mel30]

Hi @PageFly-Victor

Thank you for your response and help this worked.

I tried to center the image and used the following code. It did not center aligned did I do something wrong?

.serum-bannerimage-containe{
width: 100%;
margin: auto;
}

[PageFly-Victor]

@mel30

You can try with this code:
@media screen and (max-width: 767px){
div#block__0ee5b823-517a-492e-898b-60c939182381 {
display: flex;
}
}