Making the Hero image full width

  • Resolved pbwpwork

    (@pbwpwork)


    5 years, 2 months ago

    Hi,

    I have seen in other sites that hero images are able to be set as full width. How is this done? I have seen on another question that this should work:

    .hero-content > img {
	width: 100%;
}

    But it doesn’t work for me.

    Here is my full code:

    header#masthead.site-header{
	background-color: #000000;
}

body {
 background-color: #FFFF00;
}
	.hero {
	  height: 700px;
	  color: transparent;
	  padding: 0px;
	 }

	.hero.page-header h1 {
	  transform: translate(-10%,-70%);
        }
	.hero-inner {
	  height: 700px;
	  background-image: url("wp-content/uploads/2019/09/hpimage-2.jpg");
        }
        .hero-content > img {
	  width: 100%;
        }

    Thanks, P

    • This topic was modified 5 years, 2 months ago by pbwpwork.

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

Viewing 1 replies (of 1 total)
  • Thread Starter pbwpwork

    (@pbwpwork)

    Fixed this by take the .hero element out of this statement: (in Style.css)

    .row, .navigation, #content, body.error404 #primary, .site-branding-container, .site-header-wrapper, .featured-content .entry-header .entry-header-row, .hero, .footer-widget-area, .featured-content .featured-content-inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 0;
  margin-bottom: 0;
  max-width: 68.75rem; }

    Then place the background image on the .hero-inner element

Viewing 1 replies (of 1 total)
  • The topic ‘Making the Hero image full width’ is closed to new replies.