WordPress.org

Ready to get started?Download WordPress

Forums

Moving Sidebar to the Right (Page is Squeezed) (12 posts)

  1. WeDivine
    Member
    Posted 1 year ago #

    Hello, I am trying to move the sidebar to the right, my page is squeezed and I would like to fix the proportions. I have the Coraline theme. Does anybody know how to do this?

    my site is wedivine.org
    Thank you

  2. paulwpxp
    Font hero
    Posted 1 year ago #

    When embeding youtube video, switch to Text Mode, not Visual Mode, and make sure to paste only the url to vdo on its own line. This will allow WP to automatically give the correct size to video based on content width.

    Another issue is that your site's markup is not validated. (Check it)
    http://validator.w3.org/

    Go over your child theme templates and fix the errors.

  3. WeDivine
    Member
    Posted 1 year ago #

    Thank you for respnding so promptly!

    I used text mode with video, still not working. Any ideas? I think this page is squeezed together for some reason.

    Also I put the site in for validation and it doesn't match my child theme...are these errors located in my themes css or the child theme?

    Thank you

  4. paulwpxp
    Font hero
    Posted 1 year ago #

    The content width set in theme function is 500px which will be used for vdo embed, yours looks off as if it doesn't respect the width.

    Might as well be related to the markup errors.

    That validator is for markup. Your child theme's template ( probably header.php ) might has a missing closing tag.

  5. WeDivine
    Member
    Posted 1 year ago #

    Hey thank you very much, my video looks fine now! :D

    This is a total newb question, but what is a markup? It is very confusing to me, the code is intimidating, I am trying to figure it out but not sure.

    Also, what would the closing tag be? Again, I am a complete newb and very intimidated by code.

    All your help is much appreciated :)

    Thank you again

  6. paulwpxp
    Font hero
    Posted 1 year ago #

    Markup is HTML.

    Some are self-closed like <img /> or <br /> for example.

    Some need opening AND closing tags like <header> ..stuff here.. </header>

    When the opening or closing is missing, browsers don't know how to render the structure. This might be what happen on your pages. Check with the validator for details, but don't get overwhelmed by all the warnings or errors, just look for the legitimate ones.

  7. WeDivine
    Member
    Posted 1 year ago #

    Hey I really don't really know what I am doing, could you please elaborate? Here is my header code

    <?php
    /**
     * @package Coraline
     * @since Coraline 1.0
     */
    ?><!DOCTYPE html>
    <!--[if IE 6]>
    <html id="ie6" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if IE 8]>
    <html id="ie8" <?php language_attributes(); ?>>
    <![endif]-->
    <!--[if (!IE)]><!-->
    <html <?php language_attributes(); ?>>
    <!--<![endif]-->
    
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>" />
    
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?php wp_head(); ?>
    </head>
    
    <body <?php body_class(); ?>>
    <div id="container" class="hfeed contain">
    <?php do_action( 'before' ); ?>
    	<div id="header">
    		<div id="masthead" role="banner">
    			<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
    
    				<span>
    
    				</span>
    			</<?php echo $heading_tag; ?>>
    			<div id="site-description"><?php bloginfo( 'description' ); ?></div>
    		</div><!-- #masthead -->
    
    		<div id="branding">
    			<?php
    				// Check to see if the header image has been removed
    				if ( '' != get_header_image() ) :
    			?>
    
    				<?php
    					// The header image
    					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
    					if ( is_singular() && has_post_thumbnail() && ( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'post-thumbnail' ) ) && $image[1] >= HEADER_IMAGE_WIDTH ) :
    						// Houston, we have a new header image!
    						the_post_thumbnail();
    					else : ?>
    					<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
    				<?php endif; // end check for featured image or standard header ?>
    
    			<?php endif; // end check for removed header image ?>
    		</div><!-- #branding -->
    		<div id="access" role="navigation">
    		  <?php /*  Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff */ ?>
    			<div class="skip-link screen-reader-text"><a href="#content">"><?php _e( 'Skip to content', 'coraline' ); ?></a></div>
    			<?php /* Our navigation menu.  If one isn't filled out, wp_nav_menu falls back to wp_page_menu.  The menu assiged to the primary position is the one used.  If none is assigned, the menu with the lowest ID is used.  */ ?>
    			<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) ); ?>
    		</div><!-- #access -->
    	</div><!-- #header -->
    
    	<div id="content-box">
    
    </header>

    Here is the style css

    /*
    Theme Name:     Coraline Child
    Theme URI:      wedivine.org
    Description:    Child theme for the Coraline
    Author:         WeDivine
    Author URI:     wedivine.org
    Template:       coraline
    Version:        3.5.1
    */
    
    @import url("../coraline/style.css");
    
    #access a {
    color: green;
    font-size: 13px;
    font-family: Cambria;
    display: block;
    line-height: 3.333em;
    padding-bottom: 0;
    padding-left: 1.2125em;
    padding-right: 1.2125em;
    padding-top: 0;
    text-decoration: none;
    }
    
    #submenu a {
        color: #FFFFFF;
        font-size: 30px
        font-weight: bold;
        padding: 3px 5px 3px 7px;
        text-shadow: 0 1px 0 #555555;
    }
    #submenu a:hover {
        text-shadow: 1px 1px 1px #000000;
    }
    
    #access {
      margin-top: 50px;
    }
    
    .entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
        border-radius: none !important;
        box-shadow: none !important;
    }
    
    #branding img {
       border: none;
    }
    
    #footer, #footer a {
     color: #F660AB;
    }

    [Please use the code buttons - backticks are not the same as single quotes]

    Thank you again

  8. paulwpxp
    Font hero
    Posted 1 year ago #

    EDIT: There is an extra </header> without its opening.

    Also this title tag is missing from the <head>

    <title><?php wp_title( '|', true, 'right' ); ?></title>

    I didn't go over all the code in your header.php but those above are just wrong. So what do you do with header.php ? I mean why do you have this template edited ? Is that directly from parent theme, or child theme ?

    In case, there is nothing you need to make changes to header.php, you can just replace it with the original.

  9. WeDivine
    Member
    Posted 1 year ago #

    This is from the child theme, I edited the header to make it responsive, as well as remove a gray part that the theme had left over.

    I tried those edits, and my page is still squeezed. Do you have any other ideas of what to do?

  10. paulwpxp
    Font hero
    Posted 1 year ago #

    Ok, I found your other thread here.
    http://wordpress.org/support/topic/moving-pages-below-header/

    You should keep it like that, don't do anyting else that's not necessary.

    "The page is squeezed" that you are refering to is the width that theme sets for 2 column layout. You might be able to change page width so that it's bigger using this in CSS.

    .two-column #container { max-width: 980px; }

    But to make it real responsive, the sidebar and content need to be adjusted to full width in certain breakpoints. Also there might be other adjustments too.

    This theme is not responsive by design. There are lots of responsive themes in the repository.

  11. WeDivine
    Member
    Posted 1 year ago #

    Ok thank you!

    Sorry I took so long to respond, had 10,000 things going on :D Really appreciate your help.

  12. WeDivine
    Member
    Posted 1 year ago #

    So I would need to post this same code in sidebar and content sections?

Topic Closed

This topic has been closed to new replies.

About this Topic