Argent Mobile Dynamic Head Image

  • tatmanta

    (@tatmanta)


    5 years ago

    Hey team,

    I’d like for the central header image to resize so width is optimized for mobile devices, but am having trouble finding the proper CSS. Can someone assist?

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Jarret

    (@jarretc)

    I assume by resize you mean you want the entirety of the 4 hands visible behind the text in mobile? If so, you’ll need to use something like the following CSS in Appearance->Customize->Additional CSS

    @media screen and (max-width: 767px) {
	.site-branding {
		background-image: url("https://halhershfield.travistatman.com/wp-content/uploads/2019/09/cropped-HalHershfield-Cover-Photo_2500x600.jpg") !important;
		background-size: 200%;	
	}
	.site-header {
		background-color: #000;
	}
}

    In the mobile version of the site the theme loads a cropped version of the header image so we have to replace it with the full image, then increase the size so the hands are more visible as the regular image is so large.

Viewing 1 replies (of 1 total)
  • The topic ‘Argent Mobile Dynamic Head Image’ is closed to new replies.