Removing the logo

[nabeel]

Hey @TomasJarvling,

You can make use of the following code:

@media (min-width: 980px) and (max-width: 1300px) {
    .site:before {
        top: 0;
        transform: rotate(-90deg) translate(-87%,0);
        left: -65px;
    }
    .site:after {
        bottom: 6em;
        transform: rotate(-90deg) translate(36%,0);
        left: -65px;
    }
}

@media (max-width: 979px) {
    .site:after {
        top: auto !important;
    }
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[TomasJarvling]

Hi.
I added the code. And i can see that the logo is there on the bottom. If I use the ipad on portrait mode the logo is also in the top, but hidden behind the picture and background color. If I use the ipad in landscape mode I cannot see the top logo either. Perhaps it is there but not visible

[ruenel]

Hello @TomasJarvling,

Please update the code and use this:

@media (max-width: 979px) {
    .site {
        padding-bottom: 0;
    }
    
    .site:after {
        position: relative !important;
        display: block;
        transform: none;
    }
}

Do not forget to clear your ipad browser cache or use private browsing mode before testing the site again.

[TomasJarvling]

Hi.
I managed to tweet the code a bit and now I think I have it covered but one small issue.

1. It works on my computer
2. It works in both landscape and portrait mode on my phone
3. It works in landscape mode on my iPad but when I turn it to portrait mode I would like the logo to be rotated so that it doesn’t end up covering the menu and the headline. Having the logo placed horisontal on both mode would be an option.

Tomas

.site:before {
content: “”;
display: block;
position: absolute;
top: -110px;
background-image: url(http://media.copilates.jarvendesign.se/2020/02/Nyköpings-Danscenter-NY-svart-scaled.gif);
background-repeat: no-repeat;
background-size: cover;
width: 200px;
height: 100px;

}
.site:after {
content: “”;
display: block;
position: absolute;
background-image: url(http://media.copilates.jarvendesign.se/2020/02/Nyköpings-Danscenter-NY-svart-scaled.gif);
background-repeat: no-repeat;
background-size: cover;
width: 200px;
height: 100px;

}
@media (max-width: 979px) {
.site:before {
content: “”;
display: block;
position: absolute;
top: 40px;
z-index: 9999;
width: 200px;
height: 100px;
}
}
@media (min-width: 980px) {
.site:before {
top: -110px;
z-index: 9999;
transform: rotate(-90deg) translate(-87%,0);
left: -15px;
}
.site:after {
bottom: 6em;
transform: rotate(-90deg) translate(36%,0);
left: -15px;
}
}

@media (max-width: 979px) {
.site:after {
top: auto !important;
}
}

.site {
padding-bottom: 140px;
}

[ruenel]

Hello Tomas,

Can you please change the order of your custom css? Have the code updated and use this instead:

.site {
  padding-bottom: 140px;
}

.site:before {
  content: "";
  display: block;
  position: absolute;
  top: -110px;
  background-image: url(http://media.copilates.jarvendesign.se/2020/02/Nyköpings-Danscenter-NY-svart-scaled.gif);
  background-repeat: no-repeat;
  background-size: cover;
  width: 200px;
  height: 100px;
}

.site:after {
  content: "";
  display: block;
  position: absolute;
  background-image: url(http://media.copilates.jarvendesign.se/2020/02/Nyköpings-Danscenter-NY-svart-scaled.gif);
  background-repeat: no-repeat;
  background-size: cover;
  width: 200px;
  height: 100px;
}

@media (min-width: 980px) {
  .site:before {
    top: -110px;
    z-index: 9999;
    transform: rotate(-90deg) translate(-87%,0);
    left: -15px;
  }
  .site:after {
    bottom: 6em;
    transform: rotate(-90deg) translate(36%,0);
    left: -15px;
  }
}

@media (max-width: 979px) {
  .site:before {
    content: "";
    display: block;
    position: absolute;
    top: 40px;
    z-index: 9999;
    width: 200px;
    height: 100px;
  }

  .site:after {
    top: auto !important;
  }
}

Kindly let us know how it goes.

[TomasJarvling]

Hi. I changed the order of the css. Works on my computer and my iphone. But only on portrait mode on the ipad. In landscape mode the logo is there but is placed over the headline and menu

[christian]

Hey Tomas,

If you look at look at our Lawyer demo here: https://demo.theme.co/lawyer/, there’s no logo in the iPad landscape view. The design dictates that there’s no room for the logo on that view.

I’ll provide the code that will make the logo disappear on iPad landscape but please understand that if we move farther from our demo, this will be veering into custom development in which case, you need to hire your own developer to continue tweaking the code guides we provided. Another recommendation is you upgrade to Pro. Below is the code to hide the logo on Ipad Landscape.

@media (min-width: 980px) and (max-width: 1400px) {
    .site:before,
    .site:after {
        display: none;
    }
}

If you wish to show the footer logo, remove .site:after in the code. You’ll need to tweak the position of the footer logo in iPad landscape view because it’s overlapping the content.

Hope that helps.

[TomasJarvling]

Ahhh. But that explains it. My fault really for not checking the demo.
Thanks for the splendid and friendly support so far.
Tomas

[nabeel]

Glad we could help.

Cheers!