Making a single element wider on a Page (Edition Theme)

Themes
1

Hi all - I’ve found numerous posts on how to modify overall page/post width in various themes using Code Injection, but is there a way to modify the width of a specific element? I see some themes do just that for Image elements, giving you the option for wider images without changing the page column width otherwise.

Some specifics on what I’m trying to do:

  • Using the Edition Theme
  • Set up a Page, and would like to keep the normal width for headline, copy, etc.
  • Midway down the Page I want to use the HTML module to embed an AirTable interface.
  • Embeds fine, but it’s a wider table and I’d like to not force the user to have to scroll too much side to side within the iFrame

Possible? Better way or module to accomplish this with? Thanks!

2

On the outermost element of the embed code, add style=”grid-column: wide-start / wide-end;” If there’s already a style tag, add the grid-column: wide-start / wide-end to it, making sure it’s separated from the rest of the styles by a ;.

Edition uses a gridded layout, and that’ll cause that element to occupy some of the whitespace on each side of the main column. If adding the style on the outermost element doesn’t work, try this in the HTML card:

<div style=”grid-column: wide-start / wide-end;”>
— put your embed code here —

</div>
3

Yes, this worked perfectly. Thank you! There was already a style tag in the embed code, so I just had to add in the grid-column line and it worked. Thanks again.

1 Like