How to Limit Container Width - Template Based off Renew Template Blank-3

[StudioSura]

Hello!

I am creating a landing page on my site. The site is using the Renew stack. The landing page is using the Template-Blank-3.php option but I need to limit the width. Everything is gigantic! If unfamiliar, this is the template with a container, no header, no footer.

I found a couple of beginner videos that show how to create a new template, and I copied the existing template PHP from the Template-Blank-3.php template because it mostly serves my needs. I just need to limit the width.

How the heck do you do that? I never learned CSS, but I figured this was such a basic question that almost anyone could answer it. This is what I’m starting with on the new template.

<?php /* Template Name: LandingPage650Width */

?> <div class="x-container max width offset">
    <div class="x-main full" role="main">

      <?php while ( have_posts() ) : the_post(); ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
          <?php x_get_view( 'global', '_content', 'the-content' ); ?>
        </article>

      <?php endwhile; ?>

    </div>
  </div>

<?php

if ( apply_filters( 'x_legacy_cranium_footers', true ) ) {
  x_get_view( 'global', '_footer' );
} else {
  get_footer();
}

?>

Thanks!

[ruenel]

Hello Jennifer,

Thanks for writing in!

The site width of your site can be set in the global option. Simply go to X/Pro > Theme Options > Layout and Design > Site Max Width. All of the containers in the theme will be following this global option. And if you only want to have specific width in your landing page using your custom page template, you may need to update your PHP code and set the maximum width in the custom template instead:

<?php /* Template Name: LandingPage650Width */

?> <div class="x-container offset" style="width: 100%; max-width: 650px;">
    <div class="x-main full" role="main">

      <?php while ( have_posts() ) : the_post(); ?>

        <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
          <?php x_get_view( 'global', '_content', 'the-content' ); ?>
        </article>

      <?php endwhile; ?>

    </div>
  </div>

<?php

if ( apply_filters( 'x_legacy_cranium_footers', true ) ) {
  x_get_view( 'global', '_footer' );
} else {
  get_footer();
}

?>

Hope this helps.