CODEWITHSUNDEEP
javascriptjqueryhtmlcss
BigPun86
BigPun86

Reputation: 2686

Hide logo when not in desktop version

how can i modify my head to hide the logo element when we are in mobile view? 

<style type="text/css">
/*<![CDATA[*/
.jtpl-logo {
    padding: 0 30px;
    width: 250px;
    transition: all 0,5s ease 0s !important;
    position: fixed;
    z-index: 1000000;
    min-width: 0000px;
    overflow: visible;
}
.jtpl-navigation { 
    transition: all 0.5s ease 0s !important;
    position: fixed;
    width: 100%;
    z-index: 100000;
    text-align: center;
    padding-left: 300px;
    background-color: #e30613;
}

/*]]>*/
</style>

Right now i have used the head to fix the navigation bar and the logo element to stay on top during scrolling. Now it would be perfect, if i could tell the logo container to remove if we are in a mobile view, or lets say when we are less then the screen width of 768px.

Is this possible? I found out that it is quite a hustle to find hints on this in combination with jimdo.

Upvotes: 0

Views: 110

Answers (4)

jafarbtech
jafarbtech

Reputation: 7015

To hide in desktop use @media like

@media (min-width:961px)  {
.jtpl-logo {
    display: none;
}
}

for other than desktop use following tags

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px)  { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }


.jtpl-logo {
    padding: 0 30px;
    width: 250px;
    transition: all 0,5s ease 0s !important;
    position: fixed;
    z-index: 1000000;
    min-width: 0000px;
    overflow: visible;
}
.jtpl-navigation { 
    transition: all 0.5s ease 0s !important;
    position: fixed;
    width: 100%;
    z-index: 100000;
    text-align: center;
    padding-left: 300px;
    background-color: #e30613;
}
@media (min-width:961px)  {
.jtpl-logo {
    display: none;
}
}
<div class="jtpl-logo">
  </div>

Upvotes: 1

Alex Szabo
Alex Szabo

Reputation: 3266

Media Queries will likely solve your problem.

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
   .jtpl-logo {
       display: none;
   }
}

Hint: I like to use this one, as it has a good and useable collection of breakpoints https://responsivedesign.is/develop/browser-feature-support/media-queries-for-common-device-breakpoints

Upvotes: 1

cmrn
cmrn

Reputation: 1103

You can use a CSS3 media query to specify styles which apply only under specific circumstances. To hide your logo on screens smaller than 768px:

@media (max-width: 768px) {
  .jtpl-logo {
    display: none;
  }
}

More info about media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Upvotes: 4

Scott Marcus
Scott Marcus

Reputation: 65808

Use CSS Media Queries to conditionally use various CSS styles based on the size of the viewport.

Upvotes: 1

Related Questions