Page Width Too Small Mobile Landscape

PenciDesign Supporter replied

4 years ago

Staff Reply

Hi,

Please go to Appearance → Customize → Custom CSS then add the following custom CSS code:

@media screen and (orientation:landscape) and (max-device-width: 767px) {
    .container,
    .container.two-sidebar.two-sidebar,
    .featured-area.style-1,
    .featured-carousel.style-2 .item img,
    .featured-area.style-4,
    .featured-area.magazine-slider {
        width: 100%;
        padding-right: 30px;
        padding-left: 30px;
    }
}

Regards,
PenciDesign.

bobradcliff started the conversation

4 years ago

Conversation Start

Could you please help me increase the displayed body/container width when using the templates "Page No Sidebar" or "Page With Sidebar" on a mobile phone in landscape mode?

These templates work perfectly on ipad/tablet and mobile phone in portrait mode. And they work fine with ipad/tablet in landscape mode.

But when using a mobile phone in landscape mode, the page width for these templates is way too narrow.

Could you please assist ?

Above two screen shots are from a mobile phone in portrait mode.

Above two screen shots of same page in landscape mode. Notice how the page width does not take advantage of the phone being rotated to landscape mode.