Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS display: flex & centering

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #246324
    bbsemail
    Participant

    I’ve defined 2 flex styles that repeat on a classifieds page: http://dev.hcca.org/classifieds1.php?cars

    The first works fine. Here’s it’s declaration:
    .flex-container
    {
    display: -webkit-flex;
    display: flex;
    justify-content: center; /centers cols in row/
    -webkit-align-items: center;
    align-items: center;/centers row/
    width: 100%;
    min-height: 50px;
    max-height: 600px;
    }
    .flex-item
    {
    max-height:600px;
    margin: 10px;
    }
    .pic
    {
    flex: 0 0 300px;
    text-align:center;
    }

    A picture and a text column sit nicely together. Below this, I want to have a contact row and it’s losing all formatting and not centering. Here’s it’s definition:
    .flex-contact
    {
    display: -webkit-flex;
    display: flex;
    justify-content: center; /centers cols in row/
    -webkit-align-items: center;
    align-items: center;/centers row/
    width: 100%;
    }
    .contactName
    {
    width:40%;
    text-align:right;
    align-self:right;
    font-family: times;
    font-size: 1.6rem;
    font-style: normal; color: black;
    }
    .contactAddress
    {
    -webkit-flex: 2;
    flex: 2;
    width:35%;
    align-self: left;
    font-family: times; font-size: 1.5rem; font-style: normal; color: black;
    }

    1. Why aren’t the contact row (flex-contact) contents centered or styled?
    2. On small displays, why isn’t the .contactAddress col going to 100% width and breaking to a new line?

    Thanks!

    #246325
    Paulie_D
    Member

    A demo in Codepen would be optimal here.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.