Left margin is 0 on Twenty Twenty template

  • Left margin is zero. This is due to this class, which is in /wp-content/plugins/ics-calendar/assets/style.min.css:

    .ics-calendar {
    clear: both;
    display: block;
    margin: 1.5em 0;
    }

    The 0 causes the left and right margins to be zero. Deselect that class’s margin value in your browser’s developer tools, and the calendar feed aligns as expected.

    This site’s theme is www.ads-software.com’s Twenty Twenty template. This theme has fairly heavy use and is among a small set that are meant to model the right way to do themes.

    (While I provided a URL, I have hacked the .css file to eliminate margin: 1.5em 0;, so visiting the site will not reproduce the problem. But imagine all the dated events being slammed to the left side. That is what I get.)

    • This topic was modified 1 year, 7 months ago by Aren Cambre.

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author room34

    (@room34)

    I’m not really sure what the issue is; as designed predating Gutenberg, you’d want the shortcode inside your content block with no extra margin on the sides. In the Block Editor you should be able to achieve what you need by placing the shortcode in a Group block. (Sorry if I’m missing something on desktop; I’m checking out your page on my phone at the moment, and the calendar looks fine.)

    Thread Starter Aren Cambre

    (@novasource)

    Thank you. Per above, I hacked the CSS to remove the offending setting, so the provided page may not be a great example.

    I placed the shortcode inside a paragraph on a blank, new page. The paragraph has no custom settings.

    I note that it seems to work correctly, without a hacked CSS, on a different site that uses the Twenty Seventeen theme. I noticed that I used a shortcode block there, not a paragraph block. Hmm…

    Plugin Author room34

    (@room34)

    Yes I would definitely recommend using a shortcode block rather than putting the shortcode in a paragraph block. Sometimes the latter also does weird things with the feed URL. (The plugin has mostly been modified by now to work around those issues, but I do believe the intention with shortcodes in the block editor is that they should go in dedicated shortcode blocks.)

    Thread Starter Aren Cambre

    (@novasource)

    Sorry for my delay in responding.

    I restored the original Twenty Twenty theme files, so that one CSS I edited is back to vanilla. I can no longer reproduce the issue regardless of whether I put the shortcode in a Shortcode block or a Paragraph block. ???♂?

    The Twenty Twenty theme has not been updated by its authors since June. Unless my WordPress instance lied to me (e.g., it did an incomplete update in the most recent update but didn’t let me know), that is the release I was on.

    Thank you for helping.

    Thread Starter Aren Cambre

    (@novasource)

    Oh, the URL has shifted. It is now https://crew863.org/next-adventures/.

    (UPDATE: It has not shifted. This is the original URL.)

    • This reply was modified 1 year, 6 months ago by Aren Cambre.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Left margin is 0 on Twenty Twenty template’ is closed to new replies.