WordPress.org

Forums

Customizr
Making circles in line up horizontally (5 posts)

  1. benwezza
    Member
    Posted 9 months ago #

    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 -->
  2. rdellconsulting
    Member
    Posted 9 months ago #

    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

  3. benwezza
    Member
    Posted 9 months ago #

    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?

  4. ElectricFeet
    Member
    Posted 9 months ago #

    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.

  5. benwezza
    Member
    Posted 9 months ago #

    This really helped and got it working. Thanks #ElectricFeet

    CHAMPION!!

Reply

You must log in to post.

About this Theme

About this Topic