0

I'm trying to make home widgets 1, 2, and 3 appear horizontally next to one another. Currently, they are propagating on top of each other, rather than next to each other. I've coded the widgets to include some external links, a facebook link, and a donation link. Unfortunately, this is a project for a class and includes code and information for our professor's personal business, some of which is not prepared for publication. If any information is required about the code, please let me know. I am new to both wordpress and HTML coding, and mainly concerned with organizing these widgets. Is it something that can be done in the wordpress dashboard, or is it a coding issue? Thanks.

0

Use CSS3 flexbox to control layout of widgets. First, wrap widget divisions in a container division <div class="widgets-container">. Add a unique class to each widget division ( in our example: widget-1, widget-2, and widget-3 ). Example code:

<div class="widgets-container">

    <div class="widget-1">
        <!-- widget-1 code below -->
        <h2>Widget 1</h2>
    </div>

    <div class="widget-2">
        <!-- widget 2 code below -->
        <h2>Widget 2</h2>
    </div>

    <div class="widget-2">
        <!-- widget 3 code below -->
        <h2>Widget 2</h2>
    </div>

</div>

This is all for HTML part. The rest is pure CSS:

.widgets-container {
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.widget-1, .widget-2, widget-3 {
    width: 30%;    
    text-align: center;
    border: solid thin;
}

More info about CSS Flexbox.

  • @KyleB you're welcome. Would you please select the answer, so others can benefit from it, too? – Frank P. Walentynowicz Oct 18 '17 at 16:55
1

The widgets are rendered as 'divs' in the html, which by default appear as blocks that would stack as you are seeing them.

To get the behavior you want, you need to add css styles to your theme's style sheet to either "float" these blocks up against each other, or set fixed or percentage widths for each and display as desired inline-blocks.

You can learn more about block VS inline-blocks and other display types for html elements here: https://developer.mozilla.org/en-US/docs/Web/CSS/display

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy