Main content section forcing content to use only left half

KathyDavie
(@kathydavie)

7 years, 11 months ago

All of a sudden every page in my website, http://westportmeadows.kathydavie.com/, is forcing text to use only the left half of the content section.

# SITE_URL: http://westportmeadows.kathydavie.com
# HOME_URL: http://westportmeadows.kathydavie.com
# IS MULTISITE : No

# THEME | VERSION : Hueman | v3.1.1# WP VERSION : 4.5.1
# PERMALINK STRUCTURE : /%postname%/

# ACTIVE PLUGINS :
Akismet: 3.1.10
Contact Form 7: 4.4.1
Formidable: 2.01.0
Hello Dolly: 1.6
Jetpack by WordPress.com: 4.0.2
MOJO Marketplace: 0.8.0
Regenerate Thumbnails: 2.2.6
Responsive Lightbox: 1.6.8
Shortcodes Ultimate: 4.9.9
The Events Calendar: 4.1.3
WP-PageNavi: 2.90
WPSocialite: 2.4.1

PHP Version: 5.4.43
MySQL Version: 5.5.42-37.1-log
Web Server Info: Apache

WordPress Memory Limit: 40MB
PHP Safe Mode: No
PHP Memory Limit: 256M
PHP Upload Max Size: 64M
PHP Post Max Size: 64M
PHP Upload Max Filesize: 64M
PHP Time Limit: 30
PHP Max Input Vars: 1000
PHP Arg Separator: &
PHP Allow URL File Open: Yes
WP_DEBUG: Disabled

Show On Front: posts
Page On Front: (#0)
Page For Posts: (#0)

Viewing 15 replies - 1 through 15 (of 18 total)

1 2 →

bdbrown
(@bdbrown)

7 years, 11 months ago
Hi Kathy. Welcome to the Hueman forum.

All of a sudden

Does that mean it was working fine one time and, the next time you looked at it, it changed? Or you made some sort of modification and now it’s not doing what you thought it would?

This in your custom css is affecting the layout:
```
article {
    width: 49%;
    float: left;
}
```
Thread Starter KathyDavie
(@kathydavie)

7 years, 11 months ago

Out of 21 pages, only 1 page actually uses <article>, so does that mean that every single page is still affected when nowhere else is that code used on the page?

bdbrown
(@bdbrown)

7 years, 11 months ago

It would only affect the pages that have the <article> element on them.

Thread Starter KathyDavie
(@kathydavie)

7 years, 11 months ago

Then why are the other 20 pages being affected by it. That or the problem is not with
article {
width: 49%;
float: left;
}

Michael
(@alchymyth)

7 years, 11 months ago

Out of 21 pages, only 1 page actually uses <article>,

what gives you that idea?

due to the coding of your theme, all the static pages and the posts are using the html tag <article> in their output.

which page are you actually targeting?

Denzel Chia
(@denzel_chia)

7 years, 11 months ago

Hi KathyDavie,

Michael and bdbrown is correct.

Your custom css is affecting every webpage, because in content there is article HTML tag.

You can take a look at your webpage source code.

To target only certain webpage, You should prefix your custom css with unique css class name ( post or page id ) found in HTML body tag

Thank you.

Thread Starter KathyDavie
(@kathydavie)

7 years, 11 months ago

Hmmm, what gives me that idea? Well, I went through every page in my web editing program looking for any instance in which I used <article>content</article>. I found it used on ONE page, http://westportmeadows.kathydavie.com/service/doctors-love-em-or-hate-em/. None of the other pages OR posts use <article>.
bdbrown
(@bdbrown)

7 years, 11 months ago
You don’t need to “use it”. The theme generates it. If you look at the theme template files content.php, content-standard.php and content-featured.php, the html <article> tag is the first tag in the file. One of those content files is used on every page. Your custom css affects every <article> tag on your site; that’s what is causing the issue:
```
article {
    width: 49%;
    float: left;
}
```
Michael
(@alchymyth)

7 years, 11 months ago

Well, I went through every page in my web editing program looking for any instance in which I used <article>content</article>. I found it used on ONE page,

as the theme already wraps the whole content into a <article> tag, and you have one article tag added within the content of one post, try to style:

article article { width: 49%; float: left; }
bdbrown
(@bdbrown)

7 years, 11 months ago
Another option would be to give your manually-added <article> tags a class and target them on only that page:
```
.page-id-285 .my-article {
    width: 49%;
    float: left;
}
```
Thread Starter KathyDavie
(@kathydavie)

7 years, 11 months ago

I eliminated article and recoded my page. Now the only page affected is the home page where previous posts appear. The first post spans the full width while the posts below are only on the right half of the page. I know I’m not using article in there. And article is eliminated from my css.
bdbrown
(@bdbrown)

7 years, 11 months ago
The first post is the Featured Post and is set to 100% of the content width by default. The other posts are being displayed using the Standard Blog List layout which reserves space on the left of the post for the post featured image. If you’re not using featured images on your posts you can expand them using this css:
```
.post-standard .post-thumbnail {
    display: none;
}
.post-standard .post-inner {
    padding-left: 0;
}
```
Thread Starter KathyDavie
(@kathydavie)

7 years, 11 months ago

I would like to use an image, but I don’t want to have to load up my media library with images. I generally use a Wikimedia Commons graphic with credit and a link back. How would I do this with the Hueman theme?

bdbrown
(@bdbrown)

7 years, 11 months ago

If you’re wanting to use an external image as the featured image, here are a couple of plugins:
https://wordpress.org/plugins/external-featured-image/
https://wordpress.org/plugins/featured-image-from-url/

Or you can do it manually using functions and filters:
http://wordpress.stackexchange.com/questions/158491/is-it-possible-set-a-featured-image-with-external-image-url

Thread Starter KathyDavie
(@kathydavie)

7 years, 11 months ago

I would prefer to add my own <img src=”blah-blah.png”/> and have it show as the featured image. Is there somewhere on the Hueman post template where I can pop the code in for an external image?