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
    • Site Builder, Child of Zeus

    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.