Container div#content.site-content without width


#1

Hi again.

I tested the theme on live website and the site layout didn’t render correctly. So I set up a fresh virgin local install of WP 4.0 without any additional plugins. Only Moesia-Theme, Page Builder and Types.

Turns out it shows the same problem there. The Blog is fine, but a static page doesn’t get the CSS needed for arranging the columns. Left column sticks to the left side, right col sticks to the right side of viewport in a 2-col-layout. Happens in all browsers.

When looking into the code I discovered that the class .container is missing.

I found the following code in php:


<?php if (!is_front_page() || ( 'posts' == get_option( 'show_on_front' ) ) ) : ?>
		<?php $container = "container"; ?>
	<?php else : ?>
		<?php $container = ""; ?>
	<?php endif; ?>
	<div id="content" class="site-content clearfix <?php echo $container; ?>">

Even if I use the front-page template the class .container is not rendered.

What am I missing here?

Thenk you for the excellent support by the way. Your answer to my last question was incredibly fast :slight_smile:


#2

Addition:

Also the padding is missing in the columns when populating the columns with text-widgets.

Sorry for my mediocre English.


#3

The container class isn’t supposed to be rendered on the front page, hence the !is_front_page() check.

The thing is that the front page is meant to be build with the custom widgets marked with FP. All of these widgets have inside them a .container class which sets the width. We’re doing it like this in order to provide the full width background color&image stuff.

The above applies for the Text widget too, it’s not part of the theme, therefore it isn’t meant to work with the front page.

If you want to use a text widget on the front page, or any other widget that is not marked with FP, you can simply copy the .container class from the bootstrap.css file, place it in a child theme or a CSS plugin, and change .container to the classname of your widget. We’re probably going to add some jQuery in a future update to add the container class automatically to default or third party widgets.


#4

Here is some code that will make other widgets display nicely on the front page.

Add this to scripts.js:


jQuery(function($) {
    $('.panel.widget').addClass('container');
});

Add this to style.css:


.panel.widget .widget-title {
	position: relative;
	margin-bottom: 60px;
	padding: 0;
	border-bottom: 0;
	text-align: center;
	font-size: 56px;
	text-transform: uppercase;
}
.panel.widget .widget-title:after {
	position: absolute;
	left: calc(50% - 35px);
	width: 70px;
	content: "";
	border-bottom: 6px double #ff6b53;
	bottom: -10px;
}

I haven’t tested it much, but it should work.


#5

Again, fast as lightning. Thank you very much.