Mobile site weirdly narrow and a gap on the top

adelianbrands

Hi,

Can you please see where is the theme inheriting mobile width so that it's clearly too narrow? That is also reflected in BeBuilder. However, the header is also pushed rather down on iPhone and this is not reflected in BeBuilder.

I have emailed the access for you if you need it.

Thanks so much.

adelianbrands

EDIT: I got the width and gap fixed with Theme Options settings but now another issue appeared on all pages. No margin settings are set for any of these pages.

Phil

I have changed your mobile header position to fixed, and set Body offset to Yes

Please check it out.

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

adelianbrands

Thanks, so much better now :) I appreciate it.

Is there a way to widen the checkout page also a bit? It could use extra screen room on the sides.

Phil

Check this code:

@media only screen and (max-width: 767px) {
 .woocommerce-checkout .content_wrapper .section_wrapper{
   padding-left: 0!important;
   padding-right: 0!important;
   }
}

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

adelianbrands

Thanks, works perfectly. Can you give me the same for Cart page also? That seems to behave similarily.

Phil

Change the CSS above with the following one:

@media only screen and (max-width: 767px) {
 .woocommerce-checkout .content_wrapper .section_wrapper,
.woocommerce-cart .content_wrapper .section_wrapper{
   padding-left: 0!important;
   padding-right: 0!important;
   }
}

Best regards

Learn more: Video Tutorials | How To | FAQ Vote on what comes next