WordPress.org

Support

Support » Themes and Templates » Customizr » Making circles in line up horizontally

Making circles in line up horizontally

  • Hi there, I have followed another post which was helpful in getting circles onto another page and expanding independantly.
    I just can’t get them to line up horizontally 3 across the page. On that post someone had the same issue and fixed it by closing their <div> ‘s correctly i thought I had done that.
    Help would be much appreciated

    Site and code below

    I have used Span4.

    page is http://www.hands2heart.com.au/couples

    <style>
    article.hover .round-div{
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1)
    }
    </style>
    
    <div class="container marketing">
    <div class="row widget-area" role="complementary">
    
    <div class="span4 fp-one"><div class="widget-front">
    <div class="thumb-wrapper "><a class="round-div" href="http://www.hands2heart.com.au" title="Importance Of Touch"></a><img width="270" height="250" src="http://www.hands2heart.com.au/wp-content/uploads/2013/05/77278606.jpg" class="attachment-medium wp-post-image" alt="wand" /></div><h2>Importance Of Touch</h2><p class="fp-text-one">Read More</p><a class="btn btn-primary fp-button" href="http://www.hands2heart.com.au" title="Importance Of Touch">See All</a>
    </div><!-- /.widget-front -->
    
    </div></div><div class="span4 fp-two">
    <div class="widget-front">
    <div class="thumb-wrapper "><a class="round-div" href="http://www.duplex-pump.com/gaso" title="5 Languages Of Love"></a><img width="270" height="250" src="http://www.hands2heart.com.au/wp-content/uploads/2013/05/168707881.jpg" class="attachment-medium wp-post-image" alt="plus" /></div><h2>5 Languages Of Love</h2><p class="fp-text-two">Read More</p><a class="btn btn-primary fp-button" href="http://www.duplex-pump.com/gaso" title="Gaso">Read More</a>
    </div><!-- /.widget-front -->
    
    </div></div><div class="span4 fp-three">
    <div class="widget-front">
    <div class="thumb-wrapper "><a class="round-div" href="http://www.duplex-pump.com/wheatley" title="Wheatley"></a><img width="270" height="250" src="http://www.hands2heart.com.au/wp-content/uploads/2013/05/121201649.jpg" class="attachment-medium wp-post-image" alt="html5" /></div><h2>Getting Started</h2><p class="fp-text-three">Read More</p><a class="btn btn-primary fp-button" href="http://www.duplex-pump.com/wheatley" title="Wheatley">See All</a>
    </div></div><!-- /.widget-front -->
    
    </div></div><!-- .container -->
Viewing 4 replies - 1 through 4 (of 4 total)
  • If you want to do this regularly, suggest you try an Editor. I’ve used Sublime 3 to reorganise this code. Note how the indent helps.

    Try this

    Thanks rdellconsulting
    It still displays the same. The width of the containet is 1160 and the circles are 270 (x3) so should be enough room.
    Not sure why the bootstrap span4 isn’t working?

    You have a lot of conflicting CSS, I’m afraid. You also have inline styles on the page itself. I particular, you have this:

    .row-fluid [class*="span"] {
        box-sizing: border-box;
        display: block;
        float: right;
        min-height: 0;
        width: 100%;
    }

    on line 49, which is then overruled by this:

    .row-fluid [class*="span"] {
        box-sizing: border-box;
        display: block;
        float: right;
        min-height: 30px;
        width: 100%;
    }

    on line 139.

    Both rules are saying that every single spanx (span1, span2, … span12) should be 100% wide.

    This really helped and got it working. Thanks #ElectricFeet

    CHAMPION!!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Making circles in line up horizontally’ is closed to new replies.
Skip to toolbar