Getting a text clock and Shortcode element to set side-by-side

  • thevoguevintage

    (@thevoguevintage)


    7 years, 3 months ago

    I’m trying to make a shortcode element set beside a block of text so that the element is aligned to the left and the text aligned to the right.

    Basically they’d be side by side. If you go to the link above you’ll see exactly how I want it to look.

    I was able to accomplish this using a plug-in called Short Code Element using their column element feature.

    The problem is that this plug-in causes my main menu to disappear on all pages for some reason, so now I need to find another way to pull this off.

    Anyone have any ideas?

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Joy

    (@joyously)

    7 years, 2 months ago

    There are several ways to get things to show side by side.
    1. Using float, you control the width and clear afterwards, but you can have problems with indeterminate heights if you don’t allow for it.
    2. Using display:inline-block, you control the width. There is always a small gap added by the browser for the white space in the HTML.
    3. flex or grid

    I suggest you put a class on each part, and put the CSS in your Additional CSS. You’ll have to handle different window sizes. Use widths in percentages, not pixels.

    <div class="my-left-element">
[shortcode]
</div>
<div class="my-right-element">
blah blah blah
</div>

    And the CSS

    .my-left-element, .my-right-element {display: inline-block; vertical-align: top;}
.my-left-element {width: 30%; margin-right: 1%}
.my-right-element {width: 67%}

    more for smaller windows if you don’t like the same percentages.

Viewing 1 replies (of 1 total)

The topic ‘Getting a text clock and Shortcode element to set side-by-side’ is closed to new replies.