Support » Theme: Twenty Thirteen » Content Spilling into Footer – not the usual sidebar problem

  • Resolved fluxappeal

    (@fluxappeal)


    Hello,

    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(); ?>
    						</div>
    						<?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-header-full,
    .entry-content-full,
    .entry-summary-full,
    .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.

Viewing 5 replies - 1 through 5 (of 5 total)
  • 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;
    }

    Thread Starter fluxappeal

    (@fluxappeal)

    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.

    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.

    Thread Starter fluxappeal

    (@fluxappeal)

    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?

    Thread Starter fluxappeal

    (@fluxappeal)

    Got it! Thanks for the help @crouchingbruin

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Content Spilling into Footer – not the usual sidebar problem’ is closed to new replies.