Increasing The Width Of Your Header

后端未结

关注

 2  1702

My website is www.rosstheexplorer.com

I want the header image to stretch across the whole page but I do not want any letters to be chopped off the \'Ross The Explore

相关标签:

2条回答

囚心锁ツ

2020-12-22 09:37

Your images will not expand to the full width of the page, because they are inside a wrapper with a max-width. You could take your images outside of the wrapper (see below). You could also apply position:absolute to the images, but that would cause a whole other set of problems.

<body <?php body_class(); ?>>
  <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>
  <div class="header">
    <img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">
    <img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">
  </div>
    <div id="page" class="hfeed site">

You would also have to add this CSS to force the image to expand beyond it's natural size, however this would start to blur the image a bit.

.header img {
  max-width: none;
  width: 100%;
}

0 讨论(0)

无人共我

2020-12-22 09:38

Using WizardCoder fantastic support and advice I was able to solve the problem.

In Additional CSS my code is now

@media screen and (min-width: 661px) {
        .mobile-header-img {
            display: none;

        }
    }

    @media screen and (max-width: 660px) {
        .header-img {
            display: none;

        }
    }

.header img {
  max-width: none;
  width: 100%;
}

In header.php my code is now

<body <?php body_class(); ?>>
    <a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'penscratch' ); ?></a>

<div class="header">
<img class="header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/02/Cover-Photo-6-2.jpg">


<img class="mobile-header-img" src="https://i2.wp.com/www.rosstheexplorer.com/wp-content/uploads/2017/05/Cover-Photo-Mobile-Test.jpg">

 </div>
<div id="page" class="hfeed site">




<header id="masthead" class="site-header" role="banner">

0 讨论(0)