WordPress page leave too much space

I have a WordPress page where I set up a row with main side at span10 and the right sidebar at span2. However, the page leaves more blank space, for example, you scroll to the right and see nothing. Here is the page in question

Here is the single.php code:

<?php get_header(); ?>



<div class="row">

<div class="span10">



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

    <h1><?php the_title(); ?></h1>

    <p><em><?php the_time('l, F jS, Y'); ?></em></p>



    <?php the_content(); ?>



    <hr>

    <?php comments_template(); ?>



<?php endwhile; else: ?>

    <p><?php _e('Sorry, this page does not exist.'); ?></p>

<?php endif; ?>



</div>

<div class="span2">

<?php get_sidebar(); ?>     

</div>

</div>



<?php get_footer(); ?>

I'm also wondering if this may be more of a WordPress issue instead of HTML, I'm a rookie with WordPress Theme Development, this is a BootStrap site.

edited Nov 19 '18 at 16:14

j08691

165k20189212

asked Nov 19 '18 at 16:10

Robbee Thomas

184

Your rendered HTML seems to be invalid. Run it through a validator like validator.w3.org/#validate_by_uri. Might just be an unclosed tag
– j08691
Nov 19 '18 at 16:19

Removing the 1170px width that you are giving in bootstrap-responsive.css on line 133 corrects the layout though.
– Awais
Nov 19 '18 at 16:34

add a comment |

Here is the single.php code:

<?php get_header(); ?>



<div class="row">

<div class="span10">



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

    <h1><?php the_title(); ?></h1>

    <p><em><?php the_time('l, F jS, Y'); ?></em></p>



    <?php the_content(); ?>



    <hr>

    <?php comments_template(); ?>



<?php endwhile; else: ?>

    <p><?php _e('Sorry, this page does not exist.'); ?></p>

<?php endif; ?>



</div>

<div class="span2">

<?php get_sidebar(); ?>     

</div>

</div>



<?php get_footer(); ?>

I'm also wondering if this may be more of a WordPress issue instead of HTML, I'm a rookie with WordPress Theme Development, this is a BootStrap site.

edited Nov 19 '18 at 16:14

j08691

165k20189212

asked Nov 19 '18 at 16:10

Robbee Thomas

184

Your rendered HTML seems to be invalid. Run it through a validator like validator.w3.org/#validate_by_uri. Might just be an unclosed tag
– j08691
Nov 19 '18 at 16:19

Removing the 1170px width that you are giving in bootstrap-responsive.css on line 133 corrects the layout though.
– Awais
Nov 19 '18 at 16:34

add a comment |

Here is the single.php code:

<?php get_header(); ?>



<div class="row">

<div class="span10">



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

    <h1><?php the_title(); ?></h1>

    <p><em><?php the_time('l, F jS, Y'); ?></em></p>



    <?php the_content(); ?>



    <hr>

    <?php comments_template(); ?>



<?php endwhile; else: ?>

    <p><?php _e('Sorry, this page does not exist.'); ?></p>

<?php endif; ?>



</div>

<div class="span2">

<?php get_sidebar(); ?>     

</div>

</div>



<?php get_footer(); ?>

I'm also wondering if this may be more of a WordPress issue instead of HTML, I'm a rookie with WordPress Theme Development, this is a BootStrap site.

edited Nov 19 '18 at 16:14

j08691

165k20189212

asked Nov 19 '18 at 16:10

Robbee Thomas

184

Here is the single.php code:

<?php get_header(); ?>



<div class="row">

<div class="span10">



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

    <h1><?php the_title(); ?></h1>

    <p><em><?php the_time('l, F jS, Y'); ?></em></p>



    <?php the_content(); ?>



    <hr>

    <?php comments_template(); ?>



<?php endwhile; else: ?>

    <p><?php _e('Sorry, this page does not exist.'); ?></p>

<?php endif; ?>



</div>

<div class="span2">

<?php get_sidebar(); ?>     

</div>

</div>



<?php get_footer(); ?>

I'm also wondering if this may be more of a WordPress issue instead of HTML, I'm a rookie with WordPress Theme Development, this is a BootStrap site.

html wordpress twitter-bootstrap bootstrap-4

edited Nov 19 '18 at 16:14

j08691

165k20189212

asked Nov 19 '18 at 16:10

Robbee Thomas

184

edited Nov 19 '18 at 16:14

j08691

165k20189212

asked Nov 19 '18 at 16:10

Robbee Thomas

184

edited Nov 19 '18 at 16:14

j08691

165k20189212

edited Nov 19 '18 at 16:14

j08691

165k20189212

edited Nov 19 '18 at 16:14

j08691

165k20189212

asked Nov 19 '18 at 16:10

Robbee Thomas

184

asked Nov 19 '18 at 16:10

Robbee Thomas

184

asked Nov 19 '18 at 16:10

Robbee Thomas

184

Your rendered HTML seems to be invalid. Run it through a validator like validator.w3.org/#validate_by_uri. Might just be an unclosed tag
– j08691
Nov 19 '18 at 16:19

Removing the 1170px width that you are giving in bootstrap-responsive.css on line 133 corrects the layout though.
– Awais
Nov 19 '18 at 16:34

add a comment |

Your rendered HTML seems to be invalid. Run it through a validator like validator.w3.org/#validate_by_uri. Might just be an unclosed tag
– j08691
Nov 19 '18 at 16:19

Removing the 1170px width that you are giving in bootstrap-responsive.css on line 133 corrects the layout though.
– Awais
Nov 19 '18 at 16:34

Your rendered HTML seems to be invalid. Run it through a validator like validator.w3.org/#validate_by_uri. Might just be an unclosed tag
– j08691
Nov 19 '18 at 16:19

Removing the 1170px width that you are giving in bootstrap-responsive.css on line 133 corrects the layout though.
– Awais
Nov 19 '18 at 16:34

add a comment |

2 Answers
2

active

oldest

votes

your span8 insde span2, gets width:770px from bootstrap-responsive.css and overrides width:620px from bootstrap.css.

span4 width looks fine for this occasion (which is only 370px) but not span8.

TLDR; Try to remove (or change class) <div class="span8"></div> which you get from <?php get_sidebar(); ?> which is located inside <div class="span2">...</div>

answered Nov 19 '18 at 16:34

Alexandros Bantzos

428

add a comment |

First of all, I thank everyone for the help.

I was going along with this [page here].1

After trying a few things and also not finding the unclosed div I was looking for, I surrendered and went to the end of that page (before the comments) and downloaded the finished project. Interestingly, it did NOT include the single.php file, that is when I ran into trouble with the said problem.

I imagine they made a mistake with the code and decided not to add it on the final project zip files, or I made the mistake. Chances are good it was the latter.

However, I was working with another WordPress project that worked well with the single.php, so that page helped out with that, but not this.

Thanks again.

answered Nov 20 '18 at 16:14

Robbee Thomas

184

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53378633%2fwordpress-page-leave-too-much-space%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

your span8 insde span2, gets width:770px from bootstrap-responsive.css and overrides width:620px from bootstrap.css.

span4 width looks fine for this occasion (which is only 370px) but not span8.

TLDR; Try to remove (or change class) <div class="span8"></div> which you get from <?php get_sidebar(); ?> which is located inside <div class="span2">...</div>

answered Nov 19 '18 at 16:34

Alexandros Bantzos

428

add a comment |

your span8 insde span2, gets width:770px from bootstrap-responsive.css and overrides width:620px from bootstrap.css.

span4 width looks fine for this occasion (which is only 370px) but not span8.

TLDR; Try to remove (or change class) <div class="span8"></div> which you get from <?php get_sidebar(); ?> which is located inside <div class="span2">...</div>

answered Nov 19 '18 at 16:34

Alexandros Bantzos

428

add a comment |

your span8 insde span2, gets width:770px from bootstrap-responsive.css and overrides width:620px from bootstrap.css.

span4 width looks fine for this occasion (which is only 370px) but not span8.

TLDR; Try to remove (or change class) <div class="span8"></div> which you get from <?php get_sidebar(); ?> which is located inside <div class="span2">...</div>

answered Nov 19 '18 at 16:34

Alexandros Bantzos

428

your span8 insde span2, gets width:770px from bootstrap-responsive.css and overrides width:620px from bootstrap.css.

span4 width looks fine for this occasion (which is only 370px) but not span8.

TLDR; Try to remove (or change class) <div class="span8"></div> which you get from <?php get_sidebar(); ?> which is located inside <div class="span2">...</div>

answered Nov 19 '18 at 16:34

Alexandros Bantzos

428

answered Nov 19 '18 at 16:34

Alexandros Bantzos

428

answered Nov 19 '18 at 16:34

Alexandros Bantzos

428

answered Nov 19 '18 at 16:34

Alexandros Bantzos

428

add a comment |

First of all, I thank everyone for the help.

I was going along with this [page here].1

I imagine they made a mistake with the code and decided not to add it on the final project zip files, or I made the mistake. Chances are good it was the latter.

However, I was working with another WordPress project that worked well with the single.php, so that page helped out with that, but not this.

Thanks again.

answered Nov 20 '18 at 16:14

Robbee Thomas

184

add a comment |

First of all, I thank everyone for the help.

I was going along with this [page here].1

I imagine they made a mistake with the code and decided not to add it on the final project zip files, or I made the mistake. Chances are good it was the latter.

However, I was working with another WordPress project that worked well with the single.php, so that page helped out with that, but not this.

Thanks again.

answered Nov 20 '18 at 16:14

Robbee Thomas

184

add a comment |

First of all, I thank everyone for the help.

I was going along with this [page here].1

I imagine they made a mistake with the code and decided not to add it on the final project zip files, or I made the mistake. Chances are good it was the latter.

However, I was working with another WordPress project that worked well with the single.php, so that page helped out with that, but not this.

Thanks again.

answered Nov 20 '18 at 16:14

Robbee Thomas

184

First of all, I thank everyone for the help.

I was going along with this [page here].1

I imagine they made a mistake with the code and decided not to add it on the final project zip files, or I made the mistake. Chances are good it was the latter.

However, I was working with another WordPress project that worked well with the single.php, so that page helped out with that, but not this.

Thanks again.

answered Nov 20 '18 at 16:14

Robbee Thomas

184

answered Nov 20 '18 at 16:14

Robbee Thomas

184

answered Nov 20 '18 at 16:14

Robbee Thomas

184

answered Nov 20 '18 at 16:14

Robbee Thomas

184

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

Search This Blog

Ufyukyu