Page Not Responsive

Support
#1

Hello,

I create a page using highlight texts.

I viewed on mobile, the texts were cut off.

Any advice, please.

Thank you

#2

Hi,

I suggest you reduce the font size in mobile.

To do that, add a unique class to your quote element.

Then add this in Theme Options > CSS

@media(max-width:767px) {
.my-quote .x-quote-text {
     font-size:15px !important;
}
}

Change 15px to adjust.

Hope that helps.

#3

Thank you.

My footer section is also not responsive.

,

Please help ASAP.

Thank you

#4

Hi There,

Thanks for writing in!

I can see the footer text part is . working fine only issue with the social icon.

To fix the social icon issue please add this CSS to your theme option -> global CSS

@media(max-width:767px) {
.e97-6.x-anchor .x-graphic-icon {
     font-size: 0.8em !important;
}
}

Hope this helps!

#5

Thank you.

I did add the given code, but the social icons seem not well responsive. Kindly see this.

Thank you

#6

Hi There,

Please remove the previous CSS.

By default, flex items will all try to fit onto one line. Please check on the Wrap children option of the container(contains the social icons) to allow the items to wrap on mobile version:


We have to add the margin for the social icons on mobile version, also add the my-container class to that container:

After that add this custom CSS:

@media (max-width: 767px){
    .my-container.x-bar-container .x-anchor.x-anchor-button {
        margin-bottom: 15px;
    }
}

Hope it helps :slight_smile:

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.