Single Post Width problems

[blog42]

Hello!

I am trying to change the max-width of a div inside the .single .entry-content.content. The .single .entry-content.content has custom max-width CSS applied to it.

So far I’ve tried giving the div separate CSS and the !important value, adding the :not(.div) value to the CSS that is applied onto .single .entry-content.content… I honestly don’t know what to do.

After inspecting the CSS, I’ve noticed that changing the box-sizing: border-box; CSS (targeting the .div element, NOT the parent) to box-sizing: inherit; the WHOLE .single .entry-content.content stops responding to the custom CSS and the max-width does not apply any more.

Could you please tell me how to target an element within .single .entry-content.content effectively? This is a real tough cookie…
Thanks in advance!

[paul.r]

Hi Robert,

I am not exactly sure what you are trying to achieve based on the info your provided.

Please note that entry content has padding, you need to remove it first so will have the exact width.

eg.

.single-post .entry-content.content {
    max-width:950px;
    padding:0 !important;
}

Hope that helps

[blog42]

Thank for your response.

To put things more clearly: I am trying to apply CSS to .single .entry-content.content, with the exception of a sub-element, that I’m referring to as “div”. I want that “div” to have a different max-width than it’s parent element.

The padding:0 !important; changed the width of the whole thing (.single .entry-content.content with all it’s child elements, including the div), which is to be expected. What I’m looking for is a way to have the div have a different max-width value than the .single .entry-content.content (I want the div to be wider than the rest of the post contents)

[blog42]

Okay, in human talk that would be:

I have a Related Posts element at the end of every post, on the single post page. I want the post contents to be a certain width, and the Related Posts to be wider than that.
I have attatched a screenshot of what I would like the page to look like:

[jade]

Hi Robert,

Since you are using a third party plugin to add the recent/related post articles, you might want to check from that plugin’s documentation if it is possible for you to specify where the plugin output is placed.

Currently, the plugin automatically outputs the related articles right after the post and they share the same container which limits them to the width of their container.

Once you are able to figure out how to move the plugin’s output, you can override the single.php template which outputs the single posts through a child theme and login through FTP then go to wp-content/themes/x-child/framework/views/icon then add the file wp-single.php:

<?php

// =============================================================================
// VIEWS/ICON/WP-SINGLE.PHP
// -----------------------------------------------------------------------------
// Single post output for Icon.
// =============================================================================

$fullwidth = get_post_meta( get_the_ID(), '_x_post_layout', true );

get_header();

?>

  <div class="x-main full" role="main">

    <?php while ( have_posts() ) : the_post(); ?>
      <?php x_get_view( 'icon', 'content', get_post_format() ); ?>
      <?php x_get_view( 'global', '_comments-template' ); ?>
    <?php endwhile; ?>

  </div>

  <?php if ( $fullwidth != 'on' ) : ?>
    <?php get_sidebar(); ?>
  <?php endif; ?>

<!--- Add the plugin output here -->

<?php get_footer(); ?>

Notice that in line 28: <!--- Add the plugin output here -->. Place the plugin output in that area.

Please also note that since this involves customization that is overriding the theme’s default view, this goes beyond the scope of our support. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Hope this helps you get started.

[blog42]

Thanks! I’ll try that

[friech]

Let us know how it goes,

Cheers!