Creating Multiple Widgets Inline With Different Widths

Anita (The cre8tive Diva) asked me to code 3 widgets for her which are different widths.

Do you have a tutorial on how to add three widgets like I have colored in the attached image? I am trying to add 3 widgets to Metro Pro below the navigation just on the home page. The first will be for a small slider and then two others where I can add Featured content or even a few entries from an RSS feed.

Here’s the result which displays 3 YouTube Videos:

.grid-container .widget-wrap {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1%;
    margin-top: 80px;
}

@media only screen and (max-width: 1023px) {

    .grid-container .widget-wrap {
        grid-template-columns: 1fr;
    }
    
}

There’s at least 2 ways you can do this:

1. You can add the code in your child themes functions.php file which is the way i did it for her.
2. You can code the front-page.php template if your theme includes one and if you want the widgets to only display on the front page.

Keep in mind the full width of the Metro Pro themes header is 1140px.

Using Your Functions File (1)

Here’s the code i added to the child themes functions & style sheet.

Using Your Front-Page Template File (2)

This solution involves adding the new functions directly to the front page template.

There’s some optional CSS code you can remove or modify to suit your own preferences.

Add Widgets Inline Of The Same Width

• Add Featured Widgets Inline Anywhere In Genesis
• Responsive Inline Header Widgets Side by Side in StudioPress Themes