Home / Forums / DynamiX Support / Alignment Issues with Shadow Styled Box

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts

  • sonoraadventist
    Participant

    Hello,

    For some reason the alignment on a shadow styled box (and other items) is not working correctly. Here's a link to the page where it is displayed. I took a screen shot of the problem and then posted it as an image belowed the section created by shortcode. As you can see, the first boxed column begins too far to the left. This happened on box chrome and firefox. 

    http://www.adventerprises.org/resources/

    and this is the code.

    [styledbox type="shadow"]

    [four_columns border="border"]

    media

    [button url="/media" color="aqua" width="full" ]listen[/button] [/four_columns]

    [four_columns border="border"]

    documents

    [button url="/documents" color="blue" width="full" ]read[/button] [/four_columns]

    [four_columns border="border"]

    reading list

    [button url="/reading-list" color="blue" width="full" ]read[/button] [/four_columns]

    [four_columns_last border="border"]

    vital links

    [button url="/vital-links" color="aqua" width="full" ]view[/button] [/four_columns_last]

    [/styledbox]

     

    Please advise.

    Thanks


    Rich
    Participant

    To get it to work with the border I had to change some of the css. I don't know if this will work in all cases, but for the similar case I changed the following in style.css:

    .columns.border.four, .columns.border.onefourth {

     width: 19%;

     margin-left: 1.6%;

    }

    That's as close as I could get it without going to pixels.

    Added – this fix only works when it's contained in an upper level container such as content-wrapper. If you add four columns inside a post – it will break and shift the last column down. Again, this will only work in this particular case and it could break other four column shortcodes elsewhere.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.