[Resolved] Custom CSS box not full width

Home Forums Support Custom CSS box not full width

This topic contains 4 replies, has 2 voices, and was last updated by  Rachel 2 weeks, 3 days ago.

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 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 Customer Support
    #1282110

    Rachel

    Closing

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

You must be logged in to reply to this topic.