CSS code Not working

• 

  littixau · Member · Aug 23, 2018 at 5:55 pm

  • Copy link
  • Add topic to favorites

  The CSS code i am using is not working on all pages online, only seems to be working on my home page. This is required to make my website header look more natural then an oversized picture for mobile phones and tablets

  The blog I need help with is: (visible only to logged in users)

• 

  littixau · Member · Aug 23, 2018 at 5:58 pm

  • Copy link

  code im using:
  https://wordpress.org/support/topic/mobile-header-image-doesnt-resizeunresponsive/#post-8565037

• 

  dkmyta · Member · Aug 23, 2018 at 6:09 pm

  • Copy link

  Hey there,

  It looks as though this specific chunk of CSS that was added applies to every page but the home page (as you can see from the :not(.home) pseudo class) and is likely the culprit, perhaps removing it altogether along with any other instances where this pseudo class applies or adjusting it to be inline will provide the results you desire:

  @media screen and (min-width: 48em) {
       .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom- 
       header-media, .has-header-video:not(.twentyseventeen-front- 
       page):not(.home) .custom-header-media {
           bottom: 0;
           height: auto;
           left: 0;
           position: absolute;
           right: 0;
           top: 0;
       }
  }

  For future reference though, the website littix.com.au is actually a self-hosted WordPress.org site rather than WordPress.com.

  This forum is designed to help clients hosted by WordPress.com. For more information on the difference between the two please check out this link: https://en.support.wordpress.com/com-vs-org.

  If you are in need of any future support for your self-hosted website you may be able to find an answer on the WordPress.org support page at the link provided: https://wordpress.org/support/ or as an alternative you may want to contact your hosting provider.

  Hopefully this helps!

  Cheers

• 

  littixau · Member · Aug 23, 2018 at 7:08 pm

  • Copy link

  Hi thanks for your prompt reply and apologies that i have posted in the wrong website altogether…… I am fairly new to CSS coding so im not sure what you meant by removing it?

• 

  littixau · Member · Aug 23, 2018 at 7:13 pm

  • Copy link

  this is my current code i have running.

  @media screen and (max-width: 480px) {
      .has-header-image.twentyseventeen-front-page .site-branding, 
      .has-header-video.twentyseventeen-front-page .site-branding, 
      .has-header-image.home.blog .site-branding, 
      .has-header-video.home.blog .site-branding,
      .has-header-image.twentyseventeen-front-page .custom-header, 
      .has-header-video.twentyseventeen-front-page .custom-header, 
      .has-header-image.home.blog .custom-header, 
      .has-header-video.home.blog .custom-header {
          display: block;   
          height: auto;
          left: 0;
          max-width: 100%;
          min-height: 0;
          -o-object-fit: unset;
          object-fit: unset;
          position: relative;
          -ms-transform: none;
          -moz-transform: none;
          -webkit-transform: none;
          transform: none;
      }
  
      .has-header-image.twentyseventeen-front-page .site-branding, 
      .has-header-video.twentyseventeen-front-page .site-branding, 
      .has-header-image.home.blog .site-branding, 
      .has-header-video.home.blog .site-branding,
      .custom-header-media,
      .has-header-image .custom-header-media img, 
      .has-header-video .custom-header-media video, 
      .has-header-video .custom-header-media iframe {
          position: static;
      }
  
      .has-header-image .custom-header-media img, 
      .has-header-video .custom-header-media video, 
      .has-header-video .custom-header-media iframe, 
      .has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {
          min-height: 1px;
          -o-object-fit: unset;
          object-fit: unset;
      }
  
      .custom-header-media:before {
          background: none;
      }
  
      body.has-header-image .site-description, 
      body.has-header-video .site-description {
          color: #222;
          opacity: 1;
      }
  
      .site-branding .wrap {
          padding: 0 1em;
      }
  }
  
  @media screen and (max-width: 768px) {
      .custom-header-media,
      .has-header-image .custom-header-media img {
          display: block;
          position: static;
      }
  
      .has-header-image.home.blog .custom-header {
          height: auto;
      }
  
      .has-header-image.home.blog .site-branding {
          left: 0;
          position: absolute;
          top: 0;
      }
  }