Static Front Page Padding with Bootstrap 3

Resolved Shapeshifter 3
(@shapeshifter-3)

10 years, 4 months ago

The most recent Automatic Update for the WordPress Core made the 15px left edge padding disappear from my Static Front Page. It seems to be a Core issue, and not a theme problem. It worked fine until 3-4 days ago. Here’s a link to my front page which jams the left column to screen edge. Doesn’t happen anywhere else throughout the site: http://toolbox-4-websites.com/ .

Here’s a link to WordPress forums asking for help: http://wordpress.org/support/topic/static-front-page-vs-bootstrap-3 .

Here’s a link to another blogger’s article on how the Bootstrap 3 grid works its magic: http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works .

Hope this helps out anyone else that runs into this problem.

(I prefer Bootstrap 3 to Bootstrap 2)

Viewing 8 replies - 1 through 8 (of 8 total)

Erik
(@southernutahautism)

10 years, 4 months ago

There is no container class around anything. You need a container somewhere, probably in <div id=”main” .. class=”container”>

The footer and header both have it, but it was left out of the main content.

Thread Starter Shapeshifter 3
(@shapeshifter-3)

10 years, 4 months ago

Erik,

Thank you for your response: it’s much appreciated!

The funny thing about this is that i sent an email request to the theme’s developer (I’m using the theme’s Pro version) and his response was the following:

“It’s a little bug in the theme. There should be an update shortly with a fix.”

c.bavota
Web Programmer

That was posted on December 9th, and I haven’t heard from him since. That aside, I’m still wondering if it is a WordPress Core problem. On ALL of my static Primary Nav Pages that use a 3-column format, I use the following code in my Text Editor:

<div class=”row”>
<div class=”col-md-4″></div>
<div class=”col-md-4″></div>
<div class=”col-md-4″></div>
</div>

That code works fine across-the-board with the exception of whatever static front page I choose. Whenever I switch a Nav Menu Page to the static front page: it jams to the far left edge.

If I deselect that front page and choose another, the previous page displays properly in the Primary Nave Menu, and the new choice for Front Page jams all the way to the left edge again.

Do you think that this is a Theme Problem, or a Core Code Problem with the Static Front Page ?

Thread Starter Shapeshifter 3
(@shapeshifter-3)

10 years, 4 months ago

The Pro version of Ward also seems to have a problem with the main bbPress Forums page. Everything is jammed to the left on that page also:

http://toolbox-4-websites.com/forums/

That page is available only through the breadcrumbs that bbPress provides.
Erik
(@southernutahautism)

10 years, 4 months ago
Looking at that site you linked, http://toolbox-4-websites.com/, there is so much going wrong with the way the HTML is set up it’s hard to say exactly where to fix it.

But I promise – it’s not wordpress core.

It’s as simple as my blog post says – the containers/rows/columns aren’t being used correctly, or sometimes not at all.

For instance, you have this set:
```
.home #main > .row {
max-width: 100% !important;
}
```
and
```
#main > .row {
margin-left: auto;
margin-right: auto;
}
```
That’s going to mess things up. Plus, there’s no container around it, and then you have content inside of the .row, but no columns around the content.

I can’t really help without being able to fix or see the actual code and theme, but I can tell you that Bootstrap 3 is being used totally wrong here, so the first step would be to set up the container and grid how it is supposed to be. Then, you could go about determining if there are problems in wordpress 3.8 core or whatever, but I am pretty sure there isn’t. The only think is that it might add the name of the page to the body classes, ie <body class=”home…”>, but still, the extra styles your are overwriting of Bootstrap’s aren’t right anyways.

WordPress core doesn’t add classes to the HTML, and it also doesn’t really control themes. The problem is in your theme, 100%.

If it is the theme author who has to add the classes, you’re screwed for now. Also, the other pages, while they don’t have the 100% max-width set, they are just as bad, as in they aren’t use the grid properly either and create horizontal scrolling issues and the content touching the edges of the browser =(

Lots going on here. Wish I could help more. Also – why can’t I right-click on that site? Super annoying.
Thread Starter Shapeshifter 3
(@shapeshifter-3)

10 years, 4 months ago

Erik,

Super helpful on your part….Thank you!

I’m going to send a copy of your response to the theme author and see if I can get a response from him (He doesn’t seem to pay too much attention to this support forum which is sad…I really like this theme).

As to the right clicking: I’m a selfish creature who uses a plugin which prevents users from downloading images from my site:
http://wordpress.org/plugins/wordpress-protection/

Sorry…I’ve been debating with myself for quite some time whether to continue its usage.

Erik
(@southernutahautism)

10 years, 4 months ago

I would remove it just out of principle. It’s not like a screenshot or just a view from the inspector can’t get anything anyways. Plus, you prevent people from copy/paste/cut, open link in new tab/browser, save-as, print, translate.

No one is going to take your images.

Also the theme developer emailed me and we’re in contact =D

Thread Starter Shapeshifter 3
(@shapeshifter-3)

10 years, 4 months ago

Erik,

I’m tickled to death that you contacted the theme’s developer. He seems to need a continual prodding to improve Ward’s implementation of Bootstrap 3.
You might be just the person to see that he stays on track. Other Bootstrap 3 theme developers might also be able to use your input.

I’ve taken your advice on right-clicking, and disabled the plugin that I was using (for now anyway). Attached you’ll find 3 links to portions of my website for your perusal. Right-Click the fire out of them, and let me (and the theme’s developer) know which Bootstrap 3 implementations are missing or wrong:

http://toolbox-4-websites.com/
http://toolbox-4-websites.com/category/music-videos/
http://toolbox-4-websites.com/category/random-thoughts-2/

I would like to see a Bootstrap 3 WordPress Theme in the top 5 of the Themes Directory’s Most Popular list. Currently, the most popular Bootstrap theme is based upon version 2.3.2. Maybe Ward can surpass it.

BTW…my forums page still jams to the left, even after the developer’s update to Ward Pro:

http://toolbox-4-websites.com/forums/

Thread Starter Shapeshifter 3
(@shapeshifter-3)

10 years, 4 months ago

After the Ward Pro update to version 1.0.3, I couldn’t get bbPress to integrate properly anymore with the rest of my content. So, what I did was disable bbPress from this website, and enable it on another of my domain names. Seems to work better that way when it’s separated, and less of a hassle.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Static Front Page Padding with Bootstrap 3’ is closed to new replies.

Tags