full width photos?

• 

  arbsdesign · Member · Mar 4, 2017 at 10:32 am

  • Copy link
  • Add topic to favorites

  Hi,

  on my current site I have a photo as a banner on the landing page, but it only spans the width of the container. Is it possible to have this span the full width of the screen (like the banner at the very top behind the logo.

  I am using the Gateway theme and on WordPress.com so don’t have access to plugins

  Thanks for your help in advance

  The blog I need help with is arbsdesign.com.

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

• 

  johnthendrix · Member · Mar 4, 2017 at 3:29 pm

  • Copy link

  Hi there,

  The photo is wrapped in <div id=”content” class=”site-content>.

  I don’t see a way to remove the left and right margin and padding on the image without also affecting all the content below it as well.

  If anyone else has a way, feel free to correct me!

  Thanks!

• 

  thesacredpath · Member · Mar 7, 2017 at 12:03 am

  • Copy link

  Hi @arbsdesign, I have an idea on how to do this. I looked at how you have your page content structured and let’s try the following.

  1. Add a “p” tag around your images at the top of your site like this.

  <p class="my-home-img>
  First image code
  Second image code
  </p>

  2. Add a div tag right before your h1 heading (below your top images) with a CSS class in it and then of course add a closing div below the last line of the content in the Text tab of your editor, something like this.

  <div class="my-home">
  All your content below the image
  </div>

  3. Add the following to your custom CSS.

  .my-home {
  	max-width: 75em;
  	margin-left: auto;
  	margin-right: auto;
  	padding-left: 1.5em;
  	padding-right: 1.5em;
  }
  .home .site-content {
  	max-width: 100%;
  	width: 100%;
  	padding-right: 0;
  	padding-left: 0;
  }
  .my-home-img, .my-home-img img {
  	width: 100% !important;
  }

  Let me know how that works out for you. In my testing, it all seems to work fine on all screen sizes.