Company Logo

• 

  thesacredpath · Member · Mar 10, 2016 at 11:08 pm

  • Copy link

  Hi, “mobile” is sort of a very fuzzy thing anymore due to the variety of screen sizes/resolutions. The following Media Query hides the logo on screens 600px and narrower, which should catch the majority of mobiles and leave the logo on the majority of tablets.

  @media screen and (max-width: 600px) {
  .site-logo {
      display: none;
  }
  }

• 

  urbanela · Member · Mar 10, 2016 at 11:30 pm

  • Copy link

  That didn’t quite do it… if you look at my website, the logo is on every page but the homepage. I want that mimicked on cell phones. If you look at my website on a cellphone you are going to see the logo taking over the entire home page.

• 

  thesacredpath · Member · Mar 11, 2016 at 1:07 am

  • Copy link

  Oops, I missed my break point. Give this a try instead. Put this at the very end of your custom CSS.

  @media screen and (max-width: 767px) {
  .site-logo {
      display: none;
  }
  }

• 

  urbanela · Member · Mar 11, 2016 at 1:13 am

  • Copy link

  That worked perfect! Is there a way to also make it so my background picture on my homepage fits to the cell phone screen as well?

• 

  thesacredpath · Member · Mar 14, 2016 at 8:05 am

  • Copy link

  Glad that worked for you. We can make the image fit on all screen sizes by using “contain” for the background size, but then the image repeats on smaller screens. If we set the background-repeat to no-repeat then you end up with the grey background color showing below the image. You can try the following two to see the effects and see if either will work for you.

  Contain with repeating background image:

  body.home {
      background-image: url('https://urbaneladesigndotcom.files.wordpress.com/2015/11/rua-line.jpg') !important;
      background-repeat: repeat;
      background-position: top center;
      background-attachment: fixed;
      background-size: contain;
  }

  Contain with no-repeat:

  body.home {
      background-image: url('https://urbaneladesigndotcom.files.wordpress.com/2015/11/rua-line.jpg') !important;
      background-repeat: repeat;
      background-position: top center;
      background-attachment: fixed;
      background-size: contain;
      background-repeat: no-repeat;
  }

  I tried a few things using Media Queries, but simply can’t get this to work acceptably.

• 

  urbanela · Member · Apr 13, 2016 at 5:36 pm

  • Copy link

  Yea, it didn’t work too well. That’s okay, I’ll come back to it another time. Thanks!

• 

  thesacredpath · Member · Apr 13, 2016 at 9:22 pm

  • Copy link

  You are welcome.