SpyderPB6 Shopify Merchant
Last edited July 10, 2012

Moving a div tied to a css clearfix class link. This post is outdated

Hello all,

I am trying to move (easy part) my shipping cart down slightly, about 12px. That was easy, I made the change in the .cart-summary line of css. The hard part (for me) is that the clickable link or the href associated with it, isn't moving down with the cart or if it is, its click-ability is becoming worse, IE it is hard to click the link.

I have tried so many combos of code to make it work and must be missing something simple.


Here is the code from the template:


        <div class="cart-summary">

        <a href="{% if template == "cart" %}/checkout{% else %}/cart{% endif %} class="clearfix">

            <div class="icon">View cart</div>

            <div class="details">

              {% if template == "cart" %}

              <span class="note">Checkout</span>

              {% else %}

              <span class="note">Your cart</span>

              {% endif %}

              <span class="item-count">{{ cart.item_count }} {{ cart.item_count | pluralize: 'Item', 'Items' }}</span>

            </div> <!-- /.details -->


        </div> <!-- /.cart-summary -->



Here is the code from the shop.css : my edit in bold below, changed from -20 to -8


.cart-summary { position:absolute; top:50%; right:0%; margin-top:-8px; }

.cart-summary a { text-decoration:none; }

.cart-summary a .details, .cart-summary a .icon { float:right; }

.cart-summary a .details { text-align:right; height:40px; padding:0px 15px; }

.cart-summary a .details .note { display:block; line-height:14px; padding-top:2px; font-size:12px; color:#888; }

.cart-summary a .details .item-count { display:block; font-size:16px; line-height:22px; padding-bottom:2px; font-weight:{{ settings.header_weight }}; color:{{ settings.header_color }}; }

.cart-summary a:hover .details .item-count { text-decoration:underline; }

.cart-summary a .icon { -webkit-transition:all 0.2s ease-out; -moz-transition:all 0.2s ease-out; transition:all 0.2s ease-out; text-align:left; text-indent:-9999px; width:40px; height:40px; background:{{ settings.shop_btn_color }} url('{{ 'icn_cart-icon.png' | asset_url }}') 50% -40px; }

.cart-summary a:hover .icon { background:{{ settings.shop_btn_hover_color }} url('{{ 'icn_cart-icon.png' | asset_url }}') 50% -82px; }


Here is the code from the shop.css associated with the clearfix which I believe plays a roll, but im not sure how.



.row:before, .row:after, .clearfix:before, .clearfix:after {content:"\0020";display:block;height:0;visibility:hidden}

.clearfix:after, .row:after { clear:both; }

.clearfix, .row { zoom:1; }




Sorry for the long post, and help would be great.





July 08, 2012

Hi Mike,

It's easier to help with a link to your web page. That way, we can play around in web dev tools or firebug.

Caroline from http://11heavens.com ∴ mllegeorgesand AT gmail DOT com
SpyderPB6 Shopify Merchant
July 09, 2012

Hi Caroline


Here is my page,



password Shop321


Still haven't ironed this one out. You'll notice how difficult it is to select the cart. This only occurred after I moved it (the cart icon) downward. 


Thanks, any help is appreciated. I imagine it's somewhere in the 

.cart-summary of my css.