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