How-to left align logo on style 8 (iPad Issue)

Hi,

I modified the CSS of the style 8 header to do two things:

1) I made the color of the header stretch 100% across the screen. This was accomplished by updating the width of the following code from 1021px to: 100%.

.td-boxed-layout .td-header-style-8 .td-header-menu-wrap,
.td-boxed-layout .td-header-style-8 > .td-header-header {
margin-left: auto;
margin-right: auto;
width: 1021px;
/* responsive portrait tablet */
/* responsive portrait phone */
}

2) I left aligned the logo to correspond with the start of the menu options below the header. This was accomplished by adding margin-left: -355px to the following code.

.td-header-style-8 .td-header-sp-logo {
margin-bottom: 0;
margin-top: 0;
width: 100%;
}

The issue that I have run into is that the logo looks great until it is on an iPad. This is due to half of the logo being shoved off of the screen. Is there anyway to left align the logo on style 8 and make the header color 100% wide without incurring this iPad rendering issue?

Thanks in advance for your help!

• This topic was modified 9 years by press.

Hi

You can try to use a media query in the css like this:

@media(min-width: 1021pc){
.td-header-style-8 .td-header-sp-logo {
margin-bottom: 0;
margin-top: 0;
width: 100%;
}
}

If the problem persist please provide your site url so I can have a closer look and get back to you with a more accurate answer.

Thanks!

Thank you, Andrel!