Why does my main menu overlap with the logo on tablets?

[kapooraayan1]

When tilting the tablet/ipad horizontally then main menu items are running into the logo. For example home, pricing and our pricing is on logo.

images are cutting of on iPad but on mobile view they appearing good but on iPad it’s very bad.

horizontal view on iPad:

Vertical view on iPad:

mobile view:

[BSS-Commerce]

Hi @kapooraayan1 ,

Insert this CSS snippet into your CSS file:

@media only screen and (max-width: 1024px) {
 .header--top-left {
    grid-template-areas: "left-icons heading icons" !important;
 }
 .header {
    grid-template-columns: 1fr auto 1fr !important;
 }
 .header__inline-menu {
    display: none !important;
 }
 header-drawer {
    display: block !important;
 }

}

Result:

[kapooraayan1]

Thanks for your response. Do you know how to adjust the website images depending on the device? On tablet/iPad devices it looks too awkward

Thank you!