[Support request] Mobile optimization

[Jonathan]

What are the best practices to make the sections and pages look good on all devices?

[Leo]

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 🙂

[Jonathan]

left link

[Fernando]

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;
}

[Author]

Posts