Wide width

• 

  littlelionphotographyco · Member · Oct 27, 2021 at 7:15 pm

  • Copy link
  • Add topic to favorites

  Hello, all of my content seems squished right in the middle. On mobile it’s fine but for desktop I would love if it would expand more. I attempted to move the blocks to full width but it looks like I no longer have the option as it says “none” when I click the area to change it. I was hoping to color code some areas.

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

• 

  supernovia · Staff · Oct 27, 2021 at 10:51 pm

  • Copy link

  Hey there, were you able to figure this out? I’m on a wide monitor right now and your content is definitely taking up much of my window.

  The availability of wide or full-width blocks depends on whether your theme supports them.

  Ideas if you still need it wider:

  – You could increase your content area with CSS. Note this can get a little complicated, and you may need to hire a developer, as layout CSS is outside our scope. You’ll need to decide what widths look right, and do testing, and decide which elements in the list should be that wide. Also, bear in mind that very wide paragraphs can be hard to read.

  But the basics could look like this:

  @media screen and (min-width: 1230px) {
    .has-custom-background #page {
      width: 90%;
    }
  
    .hero-wrapper, .hero .hentry, .navigation-classic .menu-primary, .navigation-classic .menu-secondary, .no-sidebar-full .content-area, .post-type-archive-jetpack-testimonial .nav-links {
      width: 90%;
    }
  
    .breadcrumbs-wrapper .entry-breadcrumbs, .content-wrapper, .featured-page-wrapper, .footer-widget-wrapper, .footer-wrapper, .front-page-testimonials-wrapper, .front-page-widget-wrapper, .grid-wrapper, .page-template-grid-page .comments-area, .header-wrapper, .navigation-default .menu-primary, .navigation-default .secondary-navigation, .search-wrapper .search-form {
      width: 90%;
    }
  }

  Note that CSS is specific to your current theme.

  For color coding / full width areas you may need more drastic layout changes, so I’d suggest being sure to use a theme that supports those widths. There are several available now.

  I hope that helps!