Services box width

  • Resolved dfgkapital

    (@dfgkapital)


    5 years, 4 months ago

    Hi there,

    so far I am really happy with the One Press theme. I am looking for one customization though which I hope can be done via custom CSS.

    In the services section I am using 3 boxes in two columns. Is it possible that the third box spans the whole width though? So you would have 2 rows of boxes

    Row one: Box 1 and 2
    Row two: Box 3, but spanning ad wide as Box 1 and Box 2 together

    Also, I noticed, that the boxes adjust height depending on how much content is in them. So my three boxes have different heights, which does not look good for Box 1 and 2, which are next to each other. Any way to make them all the same height?

    Your help is much appreciated. Many thanks and kind regards
    Dorian

    • This topic was modified 5 years, 4 months ago by dfgkapital.
Viewing 2 replies - 1 through 2 (of 2 total)
  • longnguyen

    (@longnguyen)

    5 years, 4 months ago

    Hi,

    With the section Services has setting: 2 columns, 3 items, you can add this custom CSS code to Appearance > Customize > Additional CSS, to make box 3 as a wide box and box 1, 2 has the same height.

    @media (min-width: 768px) {
    .section-services .col-lg-6:last-child {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .section-services .col-lg-6 {
        margin-bottom: 15px;
    }
    .section-services .service-item {
        height: 100%;
    }
}

    Screenshot: https://share.getcloudapp.com/RBu9QAJk

    Thread Starter dfgkapital

    (@dfgkapital)

    5 years, 4 months ago

    Hi Long,

    thank you very much, this works exactly as I wanted it to. I decided that I wanted to have the wide box first and change “last-child” to “first-child” in your code.
    Except: When I vie the webpage on my iPhone 11, but hold the iPhone horizontally (so I have a wide screen), the text in the services boxes gets completely messed up. Minor issuue, but any way to fix that?

    I have two more questions until my website is finalized:

    – How can I change the font size of the Section titles (About, Services, Team) and potentially have it underlined?
    – I deactivated the contact form in the contact section and then the rest of the contact section moves to the left. Is it possible to have this centered? To be clear: I don’t want the text centered, but the whole “block of text and contact information”

    I’d really appreciate your help. Many thanks and best
    Dorian

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

The topic ‘Services box width’ is closed to new replies.