adjust manually header images for mobile version, to select what to be displayed

• 

  hawli72 · Member · Jan 13, 2017 at 11:48 am

  • Copy link
  • Add topic to favorites

  how to adjust (center or crop) manually header images for mobile version in order to select what part of the image to be displayed on small screens.

  I already resized the images into the measures of the theme but the funny thing is that just one image, the one of the main page (#feature image) adapts perfectly to the mobile or any version but the other headers jut not.

  Is there some CSS way to make it possible?

  Many thanks

  Jörg

  Weck den Revoluzzer in Dir!

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

• 

  thesacredpath · Member · Jan 16, 2017 at 11:19 pm

  • Copy link

  Hi Jörg, this is a bit of a challenge. The image on the front page is a slider slide, and the size of the image is continually calculated and adjusted by the slider software. The images on other pages are featured images and they do not get resized. In general the featured images work best with images that are more of a photographic or graphic nature where it isn’t important to keep the entire image visible. I’ve put together the following CSS, which uses Media Queries to get the image, and image container div to resize. Add it and test in your phone and tablet. In my testing this worked pretty well.

  @media screen and (max-width: 900px) {
  	 #page .has-background-cover {
  	   background-size: auto 100%;
    }
    #page #primary-header {
  	  height: calc(1440px / 4);
    }
  }
  @media screen and (max-width: 600px) {
  	#page #primary-header {
  		height: calc(1440px / 6);
  	}
  }
  @media screen and (max-width: 480px) {
  	#page #primary-header {
  		height: calc(1440px / 13);
  		display: block;
  	}
  	#page .has-background-cover {
  		background-size: 100% auto;
  	}
  }