Widening Homepage Shadow Box

• 

  homelessnessnewssandiego · Member · Aug 2, 2016 at 7:02 pm

  • Copy link
  • Add topic to favorites

  I’d like to widen the white shadow box on my homepage to allow for all content in the box to be visible without scrolling for desktops. Help!

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

• 

  hallluke · Member · Aug 2, 2016 at 9:08 pm

  • Copy link

  Hi, your site it set to private so we can’t see it at the moment. Can you make it public or let me know what theme you’re using and point out the specific issue on the demo site so I can take a closer look.

• 

  homelessnessnewssandiego · Member · Aug 2, 2016 at 9:18 pm

  • Copy link

  Hi – yes, the site’s not ready to go live yet. The theme is Sela. There’s a white shadow box over the primary photo of the homepage that I want to try to widen.

• 

  hallluke · Member · Aug 2, 2016 at 11:24 pm

  • Copy link

  Thanks, that explains it perfectly. Go to the CSS section of your customiser and copy in the following code:

  @media screen and (min-width: 768px) {
    .front-page-content-area .with-featured-image {
      width: 650px;
    }
  }

  You can set the width narrower but you don’t want to set it too much wider than that or it will start to mess with the tablet layout. I hope this helps.

• 

  homelessnessnewssandiego · Member · Aug 3, 2016 at 5:45 pm

  • Copy link

  Great, thanks! Now it’s just a little too long (a scrolling bar still appears in the shadow box even though all the text is visible). Is there a way to also shorten the height slightly?

• 

  thesacredpath · Member · Aug 3, 2016 at 7:52 pm

  • Copy link

  @homelessnessnewssandiego, you can change the width that @hallluke gave in the CSS to perhaps something like 750px. The one thing to remember though is that you can’t control the height of a visitor’s browser window. If they have it set shorter than what “works for you” they will still see the scroll bars.