CSS for Sela – full width

• 

  bfastatbubbys7 · Member · Oct 15, 2018 at 10:46 pm

  • Copy link
  • Add topic to favorites

  Hi there,

  My site is https://makethemove.ie and I want to make the header/logo and menu and front page content/picture stretch full width (i.e. where the peach color background area appears) so I can make the website appear full width and change the background color to white for other widgets/footers. On other pages I’d like the featured image to stretch full width too, and the post content if possible but not necessary.

  Is there CSS that can help with this? I have a business WP plan.

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

• 

  charleybea · Member · Oct 16, 2018 at 2:23 am

  • Copy link

  There is a way to do this via CSS, but it may require some more tweaking – especially with regards to the auto sizing of the images. And it may not be the best solution since it can possibly impact mobile views.

  If trying another theme that comes with a full width layout option is not ideal, feel free to try adding the code below.

  .site {
    max-width: 100%;
  }
  .hero-content > img {
    display: block; 
    min-width: 100%; 
    max-height: 435px;
  }
  .hero .entry-thumbnail img {
  display: block; 
  min-width: 100%; 
  max-height: 435px;
  }

  https://en.support.wordpress.com/custom-design/editing-css/

  I hope this helps!

• 

  bfastatbubbys7 · Member · Oct 16, 2018 at 11:52 am

  • Copy link

  Hi Charley!

  Yes that worked except got some errors about unexpected LBRACE and token ; and & with the below so I had to leave this out:

  .hero-content > img {
  display: block;
  min-width: 100%;
  max-height: 435px;
  }

  It’s reformatted my posts perfectly too however now the text ends at awkward margins, as on https://makethemove.ie/faqs-resources/

  How could I make it so the right hand side margin is much much further to the right? As in filling all the page to the right minus some padding identical to the padding on the left between the white box around ‘FAQS and Resources’

  Thanks!

• 

  bfastatbubbys7 · Member · Oct 16, 2018 at 12:04 pm

  • Copy link

  Oh I figured it out!

• 

  bfastatbubbys7 · Member · Oct 16, 2018 at 12:13 pm

  • Copy link

  Sorry for the millionth reply, it doesn’t seem to apply to the posts page:

  https://makethemove.ie/life-here/

  How can we add to this to extend the picture full screen too?

• 

  charleybea · Member · Oct 16, 2018 at 4:25 pm

  • Copy link

  Try replacing the code I gave you previously

  .hero .entry-thumbnail img {
  display: block; 
  min-width: 100%; 
  max-height: 435px;
  }

  with this one instead

  .entry-thumbnail img, 
  .post-thumbnail img {
  display: block; 
  min-width: 100%; 
  max-height: 435px;
  }

  And then also add this CSS as well
  .content-area {
  width: 100%;
  }

  That should work. Keep in mind I’m only inspecting the page’s source code using the browser, so it may affect other areas of your site once you’ve implemented it. Let me know how that goes :)

• 

  supernovia · Staff · Oct 16, 2018 at 9:12 pm

  • Copy link

  Thanks for your help here, @charleybea !

  One tip that can help too, @bfastatbubbys7, you can use preview in the customizer to test your site at different device sizes. And if something doesn’t work well on small screens, for example, you can make adjustments to fix that.

  Cheers!

• 

  bfastatbubbys7 · Member · Oct 16, 2018 at 9:34 pm

  • Copy link

  Thanks that worked! Only thing that happens is this awkward space in the posts page between the menu bar and image:

  https://makethemove.ie/life-here/

  Any CSS to remove that?

• 

  charleybea · Member · Oct 16, 2018 at 11:34 pm

  • Copy link

  No problem @supernovia !

  
  @bfastatbubbys7 – looks like the blog page adds some padding on the top which is what is giving that extra space below the menu and above the first post image. Try adding this code:

  .blog .site-content {
  padding-top: 0;
  }

• 

  bfastatbubbys7 · Member · Oct 31, 2018 at 10:45 am

  • Copy link

  This fixed it for the blog page but not the posts page, how could I do that?

• 

  supernovia · Staff · Oct 31, 2018 at 8:28 pm

  • Copy link

  You can make this CSS apply more broadly like so:

  .site-content {
  padding-top: 0;
  }

  That way every page that has a .site-content section on it will have no padding on top.

• 

  bfastatbubbys7 · Member · Oct 31, 2018 at 8:36 pm

  • Copy link

  thank you!