Twenty Thirteen
[resolved] Content Spilling into Footer - not the usual sidebar problem (6 posts)

  1. fluxappeal
    Posted 2 years ago #


    I'm using a twentythirteen child theme with WP3.8, chrome. The problem I'm having is overlapping content and map on this page: http://fluxappeal.com/isource/contact-2/

    When I apply the default template, all works fine, except I wanted to eliminate the sidebar, so I created a full-width template by modifying as follows:

    get_header(); ?>
    	<div id="primary" class="content-area">
    		<div id="content" class="site-content" role="main">
    			<?php /* The loop */ ?>
    			<?php while ( have_posts() ) : the_post(); ?>
    				<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    					<header class="entry-header-full">
    						<?php if ( has_post_thumbnail() && ! post_password_required() ) : ?>
    						<div class="entry-thumbnail">
    							<?php the_post_thumbnail(); ?>
    						<?php endif; ?>
    						</header><!-- .entry-header -->
    					<div class="entry-content-full">
    						<?php the_content(); ?>
    						<?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
    					</div><!-- .entry-content -->
    					<footer class="entry-meta-full">
    						<?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '</span>' ); ?>
    					</footer><!-- .entry-meta -->
    				</article><!-- #post -->
    				<?php comments_template(); ?>
    			<?php endwhile; ?>
    		</div><!-- #content -->
    	</div><!-- #primary -->
    <?php get_footer(); ?>

    And adding this CSS:

    /*Full width Template*/
    .entry-meta-full {
    	margin: 0 auto;
    	max-width: 1110px;
    	width: 95%;

    I created two classes for positioning the content:

    .addressleft {
    	width: 40%;
    	overflow: hidden;
    	display: block;
    	position: relative;
    	float: left;
    .mapright {
    	width: 50%;
    	overflow: hidden;
    	display: block;
    	position: relative;
    	float: left;

    The content seems to be behaving in a similar fashion to the sidebar widgets in the default template. Where did I go wrong?

    I did modify the footer css, could this be conflicting?

    .sidebar .site-footer .widget-area {
    	max-width: 1200px;
    	position: relative;
    	margin-left: 25%;

    Appreciate any advice.

  2. CrouchingBruin
    Posted 2 years ago #

    Add this CSS to the end of your child theme's style.css file:

    .entry-content-full:after {
    	content: "";
    	display: block;
    	clear: both;
    	visibility: hidden;
    	font-size: 0;
    	height: 0;
  3. fluxappeal
    Posted 2 years ago #

    Thank you CrouchingBruin, your fix makes sense since I didn't add :after specs for my new full-width class. Unfortunately, it makes no change.

    When I remove the floats from my class, the content no longer overlaps, but doesn't align. It looks like I need to work on nesting my divs differently to make things work.

  4. CrouchingBruin
    Posted 2 years ago #

    It looks like it worked, nothing is being covered up by the footer (may be you just need to clear your browser cache?); just add the float lefts back in.

  5. fluxappeal
    Posted 2 years ago #

    Yes! It took some time for the cache to clear out, thank you so much :) However, the map doesn't move to the next line when the browser window is reduced, am I missing something in media query?

  6. fluxappeal
    Posted 2 years ago #

    Got it! Thanks for the help @CrouchingBruin

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic