Mobile optimization

Hi there,

Any chance you can link us to the page in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

left link

Hi Jonathan,

For one, when it comes to custom CSS, there are media queries you can use.

For instance, you have this custom CSS which seems to break your site on mobile:

.orange_box {
                width: 501px!important;
                height: 250px !important;
                border-radius: 18px !important;
}

You should use media queries to adjust its width accordingly: https://docs.generatepress.com/article/responsive-display/

Example:

.orange_box {
                height: 250px !important;
                border-radius: 18px !important;
}

@media (max-width: 768px) {
    /* CSS in here for mobile only */
    width: 100% !important;
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
width: 100% !important;
}
@media (min-width: 1025px) {
    /* CSS in here for desktop only */
width: 510px !important;
}