CSS help needed with my site

Please advise how to make page content with 1200px in width. When adding:

#meet_team_box {

width: 1200px;

margin: auto;

}

The section with a gray background is not full width, and it needs t to be in full width

  • Nithin
    • Support Wizard

    Hi allanlove,

    The section with a gray background is not full width, and it needs t to be in full width

    Have you fixed this? Seems like the gray background is full width, when I check at the moment.

    I could notice the footer is not showing fully, which can be corrected by editing the existing CSS:

    #colophon {
    height: 210px;
    overflow: hidden;
    }

    To:

    #colophon {
    height: auto;
    overflow: hidden;
    }

    Please advise, if I'm missing anything. Have a nice weekend. :slight_smile:

    Regards,

    Nithin

  • allanlove
    • The Incredible Code Injector

    Hey,

    Happy New Year!

    Thanks for the above.

    What I need is for the content on this page http://tumbletots.allanlove.net/meet-the-team/ to be the same width as it is on other pages, please see this page http://tumbletots.allanlove.net/about-us/. So it is the same width as the menu. So the grey section is still full width but the text and image is a fixed width of 1200px or something along those lines.

    The meet the team page is a custom template.

    Please see the below

    <?php /* Template Name: Custom Meet the team page */
    get_header(); ?>

    <?php
    /**
    * flash_before_body_content hook
    */
    do_action( 'flash_before_body_content' ); ?>
    <div class="green_header_bar" style="margin-bottom:30px; margin-top:40px;"><h1 syle="color:#ffffff!important; text-align:center!important;">Meet The Team</h1></div>

    <div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">

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

    get_template_part( 'template-parts/content', 'page' );

    /**
    * flash_before_comment_template hook
    */
    do_action( 'flash_before_comment_template' );

    // If comments are open or we have at least one comment, load up the comment template.
    if ( comments_open() || get_comments_number() ) :
    comments_template();
    endif;

    /**
    * flash_after_comment_template hook
    */
    do_action( 'flash_after_comment_template' );

    endwhile; // End of the loop.
    ?>

    </main><!-- #main -->
    </div><!-- #primary -->

    <?php
    /**
    * flash_after_body_content hook
    */
    do_action( 'flash_after_body_content' ); ?>

    <div id="meet_team_box">

    <div class="meetteamimage">
    <?php if( get_field('image') ): ?>

    <img src="<?php the_field('image'); ?>" />

    <?php endif; ?>
    </div>

    <div id="meet_team_details">
    <h1 style="color:#000000;" id="cf_name"><?php the_field('name'); ?></h1>
    <h2 style="color:#e2231a; font-size:21px;" id="cf_job_title;"><?php the_field('job_title'); ?></h2>
    <h2 style="color:#e2231a; font-size:21px;" id="cf_job_location;"><?php the_field('job_title_location'); ?></h2>
    <button class="hide-btn-on-desk">Read More ?</button>
    <div class="show-bio-on-desk">
    <p style="color:#000;" id="cf_bio"><?php the_field('bio'); ?> </p>
    Tel: <a href="tel:<?php the_field('tel_number'); ?>"><?php the_field('tel_number'); ?></a>
    <br clear="all" />
    Email: <a href="mailto:<?php the_field('email'); ?>"><?php the_field('email'); ?></a>
    </div>
    </div>
    </div>

    <div id="meet_team_box" class="greybackground">
    <div class="meetteamimage">
    <?php if( get_field('image_2') ): ?>

    <img src="<?php the_field('image_2'); ?>" />

    <?php endif; ?>
    </div>

    <div id="meet_team_details">
    <h1 style="color:#000000;" id="cf_name"><?php the_field('name_2'); ?></h1>
    <h2 style="color:#e2231a; font-size:21px;" id="cf_job_title;"><?php the_field('job_title_2'); ?></h2>
    <h2 style="color:#e2231a; font-size:21px;" id="cf_job_location;"><?php the_field('job_title_location_2'); ?></h2>
    <button class="hide-btn-on-desk">Read More ?</button>
    <div class="show-bio-on-desk">
    <p style="color:#000;" id="cf_bio"><?php the_field('bio_2'); ?> </p>
    Tel: <a href="tel:<?php the_field('tel_number_2'); ?>"><?php the_field('tel_number_2'); ?></a>
    <br clear="all" />
    Email: <a href="mailto:<?php the_field('email_2'); ?>"><?php the_field('email_2'); ?></a>
    </div>
    </div>
    </div>

    <div id="meet_team_box">
    <div class="meetteamimage">
    <?php if( get_field('image_3') ): ?>

    <img src="<?php the_field('image_3'); ?>" />

    <?php endif; ?>
    </div>
    <div id="meet_team_details">
    <h1 style="color:#000000;" id="cf_name"><?php the_field('name_3'); ?></h1>
    <h2 style="color:#e2231a; font-size:21px;" id="cf_job_title;"><?php the_field('job_title_3'); ?></h2>
    <h2 style="color:#e2231a; font-size:21px;" id="cf_job_location;"><?php the_field('job_title_location_3'); ?></h2>
    <button class="hide-btn-on-desk">Read More ?</button>
    <div class="show-bio-on-desk">
    <p style="color:#000;" id="cf_bio"><?php the_field('bio_3'); ?> </p>
    Tel: <a href="tel:<?php the_field('tel_number_3'); ?>"><?php the_field('tel_number_3'); ?></a>
    <br clear="all" />
    Email: <a href="mailto:<?php the_field('email_3'); ?>"><?php the_field('email_3'); ?></a>
    </div>
    </div>
    </div>

    <div id="meet_team_box" class="greybackground">
    <div class="meetteamimage">
    <?php if( get_field('image_4') ): ?>

    <img src="<?php the_field('image_4'); ?>" />

    <?php endif; ?>
    </div>
    <div id="meet_team_details">
    <h1 style="color:#000000;" id="cf_name"><?php the_field('name_4'); ?></h1>
    <h2 style="color:#e2231a; font-size:21px;" id="cf_job_title;"><?php the_field('job_title_4'); ?></h2>
    <h2 style="color:#e2231a; font-size:21px;" id="cf_job_location;"><?php the_field('job_title_location_4'); ?></h2>
    <button class="hide-btn-on-desk">Read More ?</button>
    <div class="show-bio-on-desk">
    <p style="color:#000;" id="cf_bio"><?php the_field('bio_4'); ?> </p>
    Tel: <a href="tel:<?php the_field('tel_number_4'); ?>"><?php the_field('tel_number_4'); ?></a>
    <br clear="all" />
    Email: <a href="mailto:<?php the_field('email_4'); ?>"><?php the_field('email_4'); ?></a>
    </div>
    </div>
    </div>

    <div id="meet_team_box">
    <div class="meetteamimage">
    <?php if( get_field('image_5') ): ?>

    <img src="<?php the_field('image_5'); ?>" />

    <?php endif; ?>
    </div>
    <div id="meet_team_details">
    <h1 style="color:#000000;" id="cf_name"><?php the_field('name_5'); ?></h1>
    <h2 style="color:#e2231a; font-size:21px;" id="cf_job_title;"><?php the_field('job_title_5'); ?></h2>
    <h2 style="color:#e2231a; font-size:21px;" id="cf_job_location;"><?php the_field('job_title_location_5'); ?></h2>
    <button class="hide-btn-on-desk">Read More ?</button>
    <div class="show-bio-on-desk">
    <p style="color:#000;" id="cf_bio"><?php the_field('bio_5'); ?> </p>
    Tel: <a href="tel:<?php the_field('tel_number_5'); ?>"><?php the_field('tel_number_5'); ?></a>
    <br clear="all" />
    Email: <a href="mailto:<?php the_field('email_5'); ?>"><?php the_field('email_5'); ?></a>
    </div>
    </div>
    </div>

    <div id="meet_team_box" class="greybackground">
    <div class="meetteamimage">
    <?php if( get_field('image_6') ): ?>

    <img src="<?php the_field('image_6'); ?>" />

    <?php endif; ?>
    </div>
    <div id="meet_team_details">
    <h1 style="color:#000000;" id="cf_name"><?php the_field('name_6'); ?></h1>
    <h2 style="color:#e2231a; font-size:21px;" id="cf_job_title;"><?php the_field('job_title_6'); ?></h2>
    <h2 style="color:#e2231a; font-size:21px;" id="cf_job_location;"><?php the_field('job_title_location_6'); ?></h2>
    <button class="hide-btn-on-desk">Read More ?</button>
    <div class="show-bio-on-desk">
    <p style="color:#000;" id="cf_bio"><?php the_field('bio_6'); ?> </p>
    Tel: <a href="tel:<?php the_field('tel_number_6'); ?>"><?php the_field('tel_number_6'); ?></a>
    <br clear="all" />
    Email: <a href="mailto:<?php the_field('email_6'); ?>"><?php the_field('email_6'); ?></a>
    </div>
    </div>
    </div>

    <div id="meet_team_box">
    <div class="meetteamimage">
    <?php if( get_field('image_7') ): ?>

    <img src="<?php the_field('image_7'); ?>" />

    <?php endif; ?>
    </div>
    <div id="meet_team_details">
    <h1 style="color:#000000;" id="cf_name"><?php the_field('name_7'); ?></h1>
    <h2 style="color:#e2231a; font-size:21px;" id="cf_job_title;"><?php the_field('job_title_7'); ?></h2>
    <h2 style="color:#e2231a; font-size:21px;" id="cf_job_location;"><?php the_field('job_title_location_7'); ?></h2>
    <button class="hide-btn-on-desk">Read More ?</button>
    <div class="show-bio-on-desk">
    <p style="color:#000;" id="cf_bio"><?php the_field('bio_7'); ?> </p>
    Tel: <a href="tel:<?php the_field('tel_number_7'); ?>"><?php the_field('tel_number_7'); ?></a>
    <br clear="all" />
    Email: <a href="mailto:<?php the_field('email_7'); ?>"><?php the_field('email_7'); ?></a>
    </div>
    </div>
    </div>

    <div id="meet_team_box" class="greybackground">
    <div class="meetteamimage">
    <?php if( get_field('image_8') ): ?>

    <img src="<?php the_field('image_8'); ?>" />

    <?php endif; ?>
    </div>
    <div id="meet_team_details">
    <h1 style="color:#000000;" id="cf_name"><?php the_field('name_8'); ?></h1>
    <h2 style="color:#e2231a; font-size:21px;" id="cf_job_title;"><?php the_field('job_title_8'); ?></h2>
    <h2 style="color:#e2231a; font-size:21px;" id="cf_job_location;"><?php the_field('job_title_location_8'); ?></h2>
    <button class="hide-btn-on-desk">Read More ?</button>
    <div class="show-bio-on-desk">
    <p style="color:#000;" id="cf_bio"><?php the_field('bio_8'); ?> </p>
    Tel: <a href="tel:<?php the_field('tel_number_8'); ?>"><?php the_field('tel_number_8'); ?></a>
    <br clear="all" />
    Email: <a href="mailto:<?php the_field('email_8'); ?>"><?php the_field('email_8'); ?></a>
    </div>
    </div>
    </div>
    </div>

    <style>

    .location_box_single {
    width: 16%;
    float: left;
    text-align: center;
    }
    .green_header_bar{
    margin-left: -500px;
    margin-right: -500px;
    padding-top:10px;
    }
    .green_header_bar h1 {
    color: #fff!important;
    }

    #meet_team_box a {
    color:#e3241b !important;
    }
    .meetteamimage {
    width:20%!important;
    padding-bottom: 40px!important;
    float:left;
    }

    #meet_team_details {
    width:75% !important;
    float:right;
    padding-bottom: 40px!important;
    }

    #meet_team_box{
    Padding-bottom: 20px;!important;
    padding:0 30px;
    }

    @media all and (min-width:320px) and (max-width: 480px) {
    .meetteamimage {
    float:none !important;
    width:100% !important;
    }
    #meet_team_details {
    width:100% !important;
    }
    }

    .greybackground {
    overflow: hidden;
    clear: both;
    background-color: #eee;
    padding: 30px 30px 0 30px !important;
    margin-bottom: 30px;
    margin-bottom: 0px!important;
    }

    #meet_team_box {
    margin-top: 30px;
    }

    .tg-container {
    width: 100%;
    }

    @media only screen and (max-width: 460px) {
    .green_header_bar {
    margin-top:8px!important;
    }
    #meet_team_details {
    align-items:center;
    }
    }

    p#cf_bio {
    padding: 0 76px !important;
    }

    #cf_bio {
    color: #000!important;
    }

    body {
    color: #000!important;
    }
    .show-bio-on-desk {
    color: black;
    }

    #meet_team_details{
    color: black!important;
    }

    #cf_name {
    color: black;
    }

    .header-top .tg-container {
    width: 1200px;
    }

    #meet_team_box {
    width: auto !important;
    }

    #colophon {
    height: auto!important;
    overflow: hidden!important;
    }
    </style>

    <?php
    get_sidebar();
    get_sidebar( 'left' );
    get_footer();

    Any help is appreciated

    Regards

  • Nithin
    • Support Wizard

    Hi allanlove,

    Adding some padding should do the job, you can add the following CSS, which should help achieve the required look:

    #meet_team_box {
    padding: 2% 18% !important;
    }

    You can add the CSS under the default WordPress customizer, under Appearance > Customize > Additional CSS.

    Regards,

    Nithin

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.