Return to previous page

Icon alignment issue in mobile view when using infobox element

This topic has 4 replies, 2 voices, and was last updated 1 weeks, 1 days ago ago by Jack Richardson

Merin

Participant

November 5, 2024 at 13:40

https://anandk60.sg-host.com/academics/
On this page, we used the info box element. which displays correctly on the web but not in mobile view. In the mobile view, the icons are not properly aligned to the left side. How can we fix this? Please see the screenshot of the mobile view in the attachment.

Files is visible for topic creator and
support staff only.

#422167 Copied

3 Answers
Jack Richardson

Support staff

November 5, 2024 at 15:37
Dear Merin,

We hope this message finds you well.

Could you kindly add the following custom CSS snippet in the Custom CSS area of the home page editor ?
```
@media only screen and (max-width: 768px) {
    .mpc-icon-column--style_3 .mpc-icon {
        float: left;
        margin: 0 .75em 0 0 !important;
        position: relative;
    }
    
    body .mpc-align--left {
        text-align: left !important;
    }
    
    .mpc-icon-column__content .mpc-icon-column__description {
        margin: 0 0 20px !important;
        text-align: left !important;
    }
}
```
Thank you for your attention to this matter.

Best regards,
Jack Richardson
The 8Theme Team
#422195 Copied
Merin

Participant

November 14, 2024 at 10:29

This code is working. But when it is applied the prefooter alignment breaks.How to resolve

Files is visible for topic creator and
support staff only.

#423340 Copied

Jack Richardson

Support staff

November 14, 2024 at 16:35

Hello @Merin

Could you check now ?
We added custom class for few rows on that page -> https://prnt.sc/SSwBv4CKF848 and modified the CSS in next way -> https://prnt.sc/mL99U81OgF-E with added custom prefixes of custom class.

Kind regards, Jack Richardson
The 8theme’s team

#423448 Copied
Viewing 4 results - 1 through 4 (of 4 total)