[Resolved] Custom CSS box not full width

Home Forums Support [Resolved] Custom CSS box not full width

Home Forums Support Custom CSS box not full width

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1252651
    Rachel

    Hi, I have added some custom css to create a highlight box to add to some paragraph blocks in my blog posts.

    However even when I left align the content in the paragraph, the box is not the full width of the container – it is indented on the left.

    Is there are a way for the css to be left aligned and run the full width of the block?

    Here is the css:
    .my-related-box {
    background-color: #f8f8f8;
    padding: 1em;
    margin: 1em;
    border-left: 5px solid #ff3366;
    max-width: 100%
    }

    Thanks,
    Rachel

    #1252921
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    .my-related-box {
        background-color: #f8f8f8;
        padding: 1em;
        margin: 1em 0;
        border-left: 5px solid #ff3366;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }
    #1254482
    Rachel

    Perfect, that works. Thanks for the help – that is a handy piece of code to know 🙂

    #1254859
    David
    Staff
    Customer Support

    You’re welcome

    #1282110
    Rachel

    Closing

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.