WP SITES

2787

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

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:

widgets different widths inline

Update : You can now use CSS Grid to display any number and any type of widget inline. Here’s the CSS which assumes your PHP code which generates the widget includes the class, grid-container.

.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

Reader Interactions

Comments

    • The CSS for the Media Queries would vary based on what you populate the widget with which could be any size so i would need to view your site to inspect the CSS while the widget is populated with your image.

      You can add the CSS to the existing Media Queries in your style sheet using the rules which include the classes for your widget or image.

Leave a Reply