Forums

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

Home Forums CSS Aligning left & right alternately

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #235477
    murrayac
    Participant

    Trying to do the basics and align icons and words left and right alternately.. using CSS of course. I know you can do this with columns in WP but I’d rather use CSS.

    http://murray.ac/tour/

    .landing .icon {
        width: 50%;
        font-size: 250px;
        color: #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }
    
    .landing .icon:hover {
        color: #55acee;
        -webkit-transition: all 0.4s ease-in-out;
        -moz-transition: all 0.4s ease-in-out;
        -ms-transition: all 0.4s ease-in-out;
        -o-transition: all 0.4s ease-in-out;
        transition: all 0.4s ease-in-out;
    }
    
    .landing .icon:nth-of-type(odd) {
        float: left;
    }
    
    .landing .icon:nth-of-type(even) {
        float: right;
    }
    

    TIA Murray

    #235478
    Paulie_D
    Member

    A brief Codepen Demo would be better than a link.

    #235479
    murrayac
    Participant

    Well there’s a first time for everything. How’s this?

    http://codepen.io/murrayac/pen/yeBXGb

    #235485
    Paulie_D
    Member

    Ok…so that looks OK…what’s your question?

    #235488
    murrayac
    Participant

    How do I align the icon right and text left, then alternate? At the moment the text overflows into the icon area.

    #235489
    murrayac
    Participant

    Without using html.

    #235494
    Paulie_D
    Member

    Oh…basically, without changing the structure, I’m pretty sure you can’t.

    Certainly not with floats…at least it would be ugly trying.

    I’d make the arguement that the structure is wrong anyway. Realistically each i + h3+ p etc should be wrapped in it’s own container.

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