Help me Ben Carlo. You're my only hope. (Blog feed and post layout issues)

BB Theme
1

(or any of the support crew, I suppose.) :slight_smile:

Site: http://goodschooling.net

Ben taught me how to serve my newsletters/posts using a Current page and an Archive page. Perfect! Now I am trying to style these pages and I’m getting confused and overwhelmed. I’m obviously missing something, but I can’t figure it out.

My goals:

  1. To have all featured images display at 920 x 520 (that’s the size I import them in) on Posts and Feed Pages.
  2. To set the text/content width for my posts at 800px wide on Posts and Feed Pages.
  3. To have my post title/meta centered on Posts and Feed Pages.

First Issue: Setting the Featured Image Width.

I am using the following code I found in the forum (from Ben again!):

/*Center align and change the featured image size*/
.fl-post-feed-image {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

I put 920 in there as I don’t want my Featured Images to be any wider than that. Also, I have been making them 920 x 520 prior to importing them, as I though the might help.

On the Current and Archive pages, the images are about 968x548. On the actual post pages they are about 1014 x 572 (post1, post2).

Why is this? How do I make them all the same size, and all 920 x 520?
Also, is it good for me to import my images at my desired max size (920 x 520) or should I be doing something different?

Second Issue: Set Text/Content width to 800px on both Post Pages and Feed Pages (Current & Archive).

How do I do this?

Third Issue: Centering the Post Title/Meta Data.

I am using the following code from Ben, again:

/*Center align the post title and post meta*/
.fl-post-feed-header {
  text-align: center;
}

That code centers the Title/Meta Data on Current and Archive pages, but it does not center it on the post pages (post 1, post 2).

How do I center the Title/Meta on the Post pages in addition to the Current and Archives feed pages?

What’s most frustrating is trying to figure out how to make the Featured Image 920px wide and Text/Content 800px wide wherever they are displayed, whether on my Current/Archive pages or the Post pages themselves. I’ve been playing with the Global Row Settings, but that doesn’t seem to do it.

Sorry so long. Hopefully it’s clear.

Thanks!
Dan

2

Hey Dan,

  1. I am seeing the featured images at 880x497 on the pages and 920x520 on the single posts. What browser are you using and on what platform?
  2. You can use the CSS snippet below to achieve this. You may also want to remove the default 20px padding/margin on your single posts modules/rows.
    3. ``` /*Set content width of Posts module to 800px*/ .fl-post-feed-content { max-width: 800px; margin: 0px auto; } /*Set all fixed width rows on Single Posts to be 800px wide*/ .fl-post-content .fl-row-fixed-width { max-width: 800px; } ``` 
    <li>You can use this CSS snippet to achieve this. This will also include center aligning the featured image on single posts.</li>

    /*Center align title, postmeta, and featured image on Single Posts*/
.fl-post-title, .fl-post-meta, .fl-post-thumb {
  text-align: center;
}

    Ben

3

First, you’re awesome as always.
Second, you’re not going to believe this, (I’m tempted to set this to private!) but the stupid browser I was using was set to 110%! LOL! No wonder it was too big.

The only problem (as far as I can tell) is that on the Current and Archives pages the Featured Image is constrained to the text/content width of 800px (or 760px after margins). On the individual post pages (eg. here), the Featured Image and the text/content are just how I want them.

Any idea what the problem is?

Finally, here is the relevant code I have so far. It’s either stuff you gave me or something I found in the forums that you gave to someone else. Can you tell me if it all works well together or if it should be optimized or consolidated or anything?

/*Center align and change the featured image size
---------------------------------------------*/
.fl-post-feed-image {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

/*Center align the post title and post meta
---------------------------------------------*/
.fl-post-feed-header {
  text-align: center;
}

/*Set content width of Posts module to 800px
---------------------------------------------*/
.fl-post-feed-content {
  max-width: 800px;
  margin: 0px auto;
}

/*Set all fixed width rows on Single Posts to be 800px wide
---------------------------------------------*/
.fl-post-content .fl-row-fixed-width {
  max-width: 800px;
}

/*Center align title, postmeta, and featured image on Single Posts
---------------------------------------------*/
.fl-post-title, .fl-post-meta, .fl-post-thumb {
  text-align: center;
}
4

Hey Dan,

Change this

.fl-post-content .fl-row-fixed-width {
  max-width: 800px;
}

to this

.single .fl-row-fixed-width {
  max-width: 800px;
}

Then remove the default 20px margin on the Posts modules and you should be good to go!

Ben

5

That seems to have done it! Thanks so much. Ya know, I primarily use BB and Divi. I really like both of them for different reasons, but on the last three projects I’ve picked BB largely because of your support. You make time for me, show patience with me, listen to me, communicate clearly, and don’t give me a bunch of code that requires !important after it. Thanks.

6

Hey Dan,

No worries! We don’t normally support CSS queries here but if it’s easy enough, and has something to do with BB, why not. :slight_smile: We’re trying to fill up the CSS Snippets part of the KB as well so these help! Declaring important on CSS is only useful for dev purposes. I don’t normally use them on production sites unless necessary. :slight_smile: Anyways, have fun with The Beaver! :slight_smile:

Ben

7

Well, I know you guys go above and beyond, and it’s why I’m here. Since there is no place on the site to buy you a beer or cup of coffee, I just published a review on Wordpress (I’m Frudoc there). Hope it helps.

A growing collection of snippets would be an awesome resource.

Until next time!

8

Hey Dan,

Thanks! We really appreciate it! :slight_smile:

It sure is! They can be found on the links below :slight_smile:
http://forum.wpbeaverbuilder.com/kb/css-snippets-theme/
http://forum.wpbeaverbuilder.com/kb/css-snippets-plugin/

Ben