Front Page widget alignment on larger screens

I did some more tinkering and moved around the text in the widgets and it seems that it is just the widgets container that is justifying almost all the way to the left when I would like it to take up nearly the full width of the screen with some padding on the sides, like the “page section” does.

Don’t mean to come back to an old thread but just wondering if you you had any advice on fixing my functions.php file which I believe must be the culprit here. I’m starting to think maybe it is because there are a lot of style sheets that need to be pulled within the parent so maybe the child is getting pulled to early? Either that or I can’t seem to see a mistake made in the code. I also can’t seem to find anything that deals with problematic child themes after the @import era so here is my entire functions file:

<?php
//
// Recommended way to include parent theme styles.
//
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri()     . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}
//
// Your code goes below
//

Hi Ryan, I took a look at your site ryanmacmorris.com at various screen sizes and the front page seems to look readable at every size. Are you still having issues with text widgets not looking right? Did you get this sorted out?

If you still need help, could you provide a new screenshot of the area you want to tweak, and let me know at what browser window size it’s a problem? Thanks!

I fixed this with a plugin but it ended up making things overflow somewhat on smaller screens. I think I’ve pretty much figured out how to do what I’m looking for just haven’t been able to find where the css is for the widget area on the front page. Does wordpress have a standard widget area that is simply loaded or is there a way I can change the 4 box layout to 3 and one fullwidth below? I believe I know how to mark up the css just haven’t found the selectors in the stylesheet, any help would be appreciated thanks, I’m hoping to scrap the plug in.

Could you point me to specifically which elements you’re trying to target? I see one widget area on your homepage with the class “widget-area.” You’re also using the Site Origin layout tool, which is adding its own elements and classes as well.

On the Harmonic demo, the HTML structure of the widget area on the homepage looks like this:

<div class="widget-area">
<aside id="text-5" class="widget widget_text"></aside>
<aside id="recent-posts-5" class="widget widget_recent_entries"></aside>
<aside id="archives-5" class="widget widget_archive"></aside>
<aside id="widget_contact_info-5" class="widget widget_contact_info"></aside>
</div>

I’ve removed the actual content for clarity. You can target each widget area using its unique ID, which will vary, depending on what sort of widget you put there. Each widget area also has the common class “widget.”

These are some good tutorials for finding a theme’s CSS and using a browser inspector, that may also be helpful:

https://dailypost.wordpress.com/2013/07/25/css-selectors/

https://dailypost.wordpress.com/2013/06/21/css-intro/

https://dailypost.wordpress.com/2013/08/29/css-matched-rule-pane/

https://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/

https://thewc.co/articles/view/web-inspector-tutorial

Great thanks, figured it out after learning a bunch more about the web inspector. Thanks for the help.

You’re welcome – glad you’re sorted!