Page width/margins

  • Resolved mayernissim

    (@mayernissim)


    5 years ago

    I’m looking for a way to alter the width of the container (and/or get rid of the margins) for the ‘main content’ on my website pages.

    I’m using the Maywood theme, which is a child of the Varia theme, which unfortunately doesn’t have a range of varying page width templates under Page Attributes like some other themes

    My collaborators would like all the the content to be the same width as the menu and the logo header (or at least a bit wider than it is).

    I’ve had a good search around the forums and tried a few approaches from those with similiar issues on other themes but nothing has worked for me, unfortunately.

    I’m not the most experienced coder, but I’m happy using Additional CSS. (Much happier than editing the theme itself)

    I’ve had a glance at the page source but I’m not entirely sure which bit of CSS is dealing with that main container, which is definitely holding me back here.

    Many thanks in advance

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Prabhat

    (@prabhatrai)

    5 years ago

    Hey @mayernissim,
    It would be best for you to communicate with the theme developers via their official support channel since they are the best equipped to provide solutions to their products.

    Forum volunteers are not given access to commercial products plus Commercial products are not supported in these forums.

    Thread Starter mayernissim

    (@mayernissim)

    5 years ago

    Many thanks for your swift reply – I’ll give the theme developers a shout and see if they can help.

    Moderator bcworkz

    (@bcworkz)

    5 years ago

    Your theme’s devs are truly your best resource if they’re willing to help. I took a quick look to see what’s involved. Essentially, apply the header’s width rules to content elements. For screens with min-width: 1024px, something like this:

    @media only screen and (min-width: 1024px) {
  p, ul, h2, h3, h4 {
    width: calc(calc( 782px - 32px) + 256px);
    max-width: calc(100% - 32px) !important;
  }
}

    However your theme has a bunch of media queries which apply different widths for different screen sizes. The narrowest ones are OK as-is, but you’ll need similar rules within the various media queries for the rest of them.

    Thread Starter mayernissim

    (@mayernissim)

    5 years ago

    Thanks so much for your help! It’s very much appreciated.

    I’ll give this a go the next time I’m in front of a computer and let you know how I get on, and I’ll also see if I can get any help direct from the devs.

    (And/or, I can try to convince my collaborators that the width is fine as is… Which would be the most elegant solution)

    Moderator bcworkz

    (@bcworkz)

    5 years ago

    If they saw the result in a mock up ( or temporarily add the rules to the element inspector tool to demonstrate ), they might be more easily convinced. IMO, the resulting side margins end up being too small, depending on exactly how wide the window is. Or if the header and content margins need to align, maybe the header should be narrowed instead?

    I just copied the existing header width rules as they appeared. Clearly the width rule could be simplified down to width: 1006px;. I’m unsure of the reasoning behind the complex nested calc() syntax.

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Page width/margins’ is closed to new replies.