Make 2 columns in sub-footer left – Outreach Pro Theme

Community Forums Forums Design Tips and Tricks Make 2 columns in sub-footer left – Outreach Pro Theme

This topic is: not resolved

This topic contains 1 reply, has 1 voice, and was last updated by  manager 4 months ago.

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

    manager
    Member
    Post count: 17

    Hi there,

    I have a text content added in text widget in Sub-footer left widget but I like to show the content in 2 columns, instead of a full length width to make it easier for reading. I am not sure how to deal with this issue. The following is the code in Style.css. I don’t know much about CSS. Thank you very much.

    .sub-footer {
    background-color: #163820;
    padding: 60px 0 30px;
    padding: 6rem 0 3rem;
    }

    .sub-footer-left {
    float: left;
    width: 500px;
    color: #fff !important;
    }

    .sub-footer-right {
    float: right;
    font-size: 14px;
    font-size: 1.4rem;
    width: 400px;
    }

    .sub-footer-left .entry-title {
    font-size: 30px;
    font-size: 3rem;
    }

    http://local environment
    #103285

    manager
    Member
    Post count: 17

    Hi there,

    I could fix one issue that is I could span the text on sub-footer-left widget to the full length by amending the width in .sub-footer-left to 1140 px and .sub-footer-right to 0 px as follows. The text covers the full width which is what I want.
    .sub-footer-left {
    float: left;
    width: 1140px;
    color: #fff !important;
    column-count:3;
    }

    .sub-footer-right {
    float: right;
    font-size: 14px;
    font-size: 1.4rem;
    width: 0px;
    color: #fff !important;
    }
    However, I need to make the text is better to read. How can I split the text into 2 columns or 3 columns? I’ve done a research from W3schools.com which recommends like following:

    div
    {
    -webkit-column-count:3; /* Chrome, Safari, Opera */
    -moz-column-count:3; /* Firefox */
    column-count:3;
    }

    How do I adapt the code into this element?
    Thanks

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

You must be logged in to reply to this topic.