Rows with white margins on small screens

[Kyle – SUPPORT]

.naked-header.naked-light #header-section #logo img.standard {
  display: none!important;
}
.naked-header.naked-light #header-section #logo img.light-logo {
  display: inline-block!important;
}
.naked-light #logo a.mobile-menu-show {
  color: #fff;
}

Should do it

– Kyle

[massappealdesigns]

hi, its now showing the dark logo on top of the white logo

Darren

[Mohammad – SUPPORT]

Hi,
Please use this custom css code also:-

.naked-header .sticky-wrapper.is-sticky #logo img.light-logo{
display:none !important;
}

.naked-header .sticky-wrapper.is-sticky #logo img.dark-logo{
display:block !important;
}

Thanks
Mohammad

[massappealdesigns]

Hi, this is making things worse now, n desktop when http://dev.massappealdesigns.com/ when i scroll down the black logo appears but out of position, on mobile its still showing both logos on top of each other

When I’m being told to insert code on the custom css, its not clear whether i should replace code or keep adding code

Here is code I have so far fro all issues in the custom css box which includes the issue to remove padding from the rows which worked fine

@media only screen and (max-width: 767px) {
#page-wrap {
padding: 0;
}
}

.naked-header .header-wrap {
position: absolute!important;
}
@media only screen and (max-width: 991px) {
.naked-header #header-section, .naked-header #header-section:before, .naked-header #header .is-sticky .sticky-header, .naked-header .is-sticky #header.sticky-header {
background: transparent!important;
}
}

#logo img {
padding-top:0;
padding-bottom:0;
}

.naked-header.naked-light #header-section #logo img.standard {
display: none!important;
}
.naked-header.naked-light #header-section #logo img.light-logo {
display: inline-block!important;
}
.naked-light #logo a.mobile-menu-show {
color: #fff;
}

.naked-header .sticky-wrapper.is-sticky #logo img.light-logo{
display:none !important;
}

.naked-header .sticky-wrapper.is-sticky #logo img.dark-logo{
display:block !important;
}

[Mohammad – SUPPORT]

Hi,
Please find this code:-

.naked-header.naked-light #header-section #logo img.light-logo {
display: inline-block!important;
}

And replace with :-
.naked-header.naked-light #header-section #logo img.light-logo {
display: inline-block ;
}

Thanks
Mohammad

[massappealdesigns]

thanks thats sorted the desktop version but the mobile version still has the black and white logo o top of each other, shall i send a screenshot?

[massappealdesigns]

hold on maybe its a cache issue, let me check, thanks

[massappealdesigns]

on safari on mobile seems fine but on chrome on mobile still has 2 logos on top of each other

[Mohammad – SUPPORT]

Hi,
Please clear the cache of browser.
Thanks
Mohammad

[massappealdesigns]

I did, empty the cache on chrome on iPhone, and still showing 2 logos on top of each other, or next to each in landscape

[Mohammad – SUPPORT]

Hi,
Please add this custom css code also.

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){
@media only screen and (max-width: 1024px)
body.naked-header .sticky-wrapper:not(.is-sticky) #logo img.retina, .naked-header #header-section #logo img.retina {
  display: none !important;
}
}

Thanks
Mohammad

[massappealdesigns]

Hi, I’m sorry but this just isn’t working, I’m not sure whether to just pay someone to fix it, i was hoping to launch the site yesterday, the pages that have full screen images are still showing 2 logos on top of each other, i emptied the cache too

Cheers

Darren

[Mohammad – SUPPORT]

Hi,
Please use this custom css code :-

@media only screen and (max-width: 1024px){
body.naked-header .sticky-wrapper:not(.is-sticky) #logo img.retina, .naked-header #header-section #logo img.retina {
  display: none !important;
}
}

Thanks
Mohammad

[massappealdesigns]

Thank you Mohammed, finally worked, thanks for your time

I have a few there very minor issues which i will start a new ticket for today then that should be that

Thanks again

Darren

[Kyle – SUPPORT]

Thanks Mohammad

– Kyle