PHP Developers Network

A community of PHP developers offering assistance, advice, discussion, and friendship.
 
Loading
It is currently Thu Oct 19, 2017 5:52 am

All times are UTC - 5 hours




Post new topic Reply to topic  [ 9 posts ] 
Author Message
PostPosted: Thu Jul 06, 2017 7:40 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
Is it possible to align a DIV to the middle of the screen, while setting a minimum left and right margin.
So if you bring in the screen, it forces a gap on the left and right, while always keeping it in the middle?

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Thu Jul 06, 2017 8:24 pm 
Online
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6388
Location: Montreal, Canada
Couldn't you do that with flexbox? Set a left and right margin on the element and set it to flex. Some representative markup would probably be helpful.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Fri Jul 07, 2017 5:43 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
I figured it out - min-width: 89% and margin left and right set to auto.
The issue now is that the left sidebar is rather wide, 25%, and if I alter it, it only changes what is inside that left pane. Something must be placing it there. If I adjust it, the right pane (thumbnails) don't expand. And I cannot find the CSS that sets that to be a particular width.

http://wp.magnium-themes.com/magnium/ma ... ition=left
Try this theme. Same issue.
Syntax: [ Download ] [ Hide ]
@media only screen and (min-width: 1230px) {
   
.woocommerce div .product
{
    max-width: 1300px!important;
    margin-left: auto;
    margin-right: auto;
}

.grve-woo-tabs
{
max-width: 90% !important;
margin-left: auto;
margin-right: auto;
}

#grve-single-post-meta-bar
{
 max-width: 1300px!important;
margin-left: auto;
margin-right: auto;  
}
#grve-related-products
{
max-width: 1300px!important;
margin-left: auto;
margin-right: auto;
}

.grve-wrapper .related .products
{
max-width: 1300px!important;
margin: auto;
}

body .archive .grve-container,#disqus_thread,#grve-content.grve-left-sidebar .grve-content-wrapper,#grve-content.grve-right-sidebar .grve-content-wrapper
{
    max-width: 89%!important;
    margin-right: auto;
    margin-left: auto;
}
}

This code will set the widths for just the archive and product pages.
But getting the left pane narrower, and the right pane to stretch with it - ie. 20/80...... cannot see how to do that.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Jul 07, 2017 5:55 am 
Online
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6388
Location: Montreal, Canada
simonmlewis wrote:
I figured it out - min-width: 89% and margin left and right set to auto.

That's very different than how I had understood your question. I was thinking you wanted to maintain at least a certain pixel width of margin.

simonmlewis wrote:
The issue now is that the left sidebar is rather wide, 25%, and if I alter it, it only changes what is inside that left pane. Something must be placing it there. If I adjust it, the right pane (thumbnails) don't expand. And I cannot find the CSS that sets that to be a particular width.

http://wp.magnium-themes.com/magnium/ma ... ition=left
Try this theme. Same issue.

It's using a 12 column grid. Instead of using a 3/9 split, you could ostensibly use 2/10. That's the easiest solution, at any rate. Barring that, you'd need to redo the grid -- maybe use 16 columns instead of 12 -- or do away with it altogether.

simonmlewis wrote:
Syntax: [ Download ] [ Hide ]
@media only screen and (min-width: 1230px) {
   
.woocommerce div .product
{
    max-width: 1300px!important;
    margin-left: auto;
    margin-right: auto;
}

.grve-woo-tabs
{
max-width: 90% !important;
margin-left: auto;
margin-right: auto;
}

#grve-single-post-meta-bar
{
 max-width: 1300px!important;
margin-left: auto;
margin-right: auto;  
}
#grve-related-products
{
max-width: 1300px!important;
margin-left: auto;
margin-right: auto;
}

.grve-wrapper .related .products
{
max-width: 1300px!important;
margin: auto;
}

body .archive .grve-container,#disqus_thread,#grve-content.grve-left-sidebar .grve-content-wrapper,#grve-content.grve-right-sidebar .grve-content-wrapper
{
    max-width: 89%!important;
    margin-right: auto;
    margin-left: auto;
}
}

This code will set the widths for just the archive and product pages.
But getting the left pane narrower, and the right pane to stretch with it - ie. 20/80...... cannot see how to do that.

Without markup to go with this, we only have half the story.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Fri Jul 07, 2017 6:01 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
Not sure what you mean about 12 columns?
Surely it is a left column and a right column (possibly set to be displayed line TD tags).
So the left one is 20%, with the Widgets in it, and the right column at x% with it's content.
Or is this done totally differently??

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Jul 07, 2017 6:16 am 
Online
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6388
Location: Montreal, Canada
simonmlewis wrote:
Not sure what you mean about 12 columns?

Can't upload my screenshot for some reason. In any event, look at the source for the link you provided earlier. You've got col-md-3 and col-md-9. It's a clear 12 column grid. Look at Bootstrap (and possibly Foundation) docs. It's exceedingly common.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Fri Jul 07, 2017 6:22 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
Damn. I gave this as an example hoping it would be the same as our code, but we don't have that class name.
And sadly I don't think our theme is showing Demos with the sidebar.

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.


Top
 Profile  
 
PostPosted: Fri Jul 07, 2017 6:25 am 
Online
Moderator
User avatar

Joined: Tue Nov 09, 2010 3:39 pm
Posts: 6388
Location: Montreal, Canada
Load a page, view source, copy/paste and obfuscate anything that needs it? Or just write up some representative markup as an example and throw it on a fiddle or CodePen or something. Best I've got.

_________________
Supported PHP versions No longer supported versions


Top
 Profile  
 
PostPosted: Fri Jul 07, 2017 6:41 am 
Offline
DevNet Master

Joined: Wed Oct 08, 2008 3:39 pm
Posts: 4349
Location: United Kingdom
HTML from Opening area of content to closing.
Syntax: [ Download ] [ Hide ]
HTML from Opening area of content to closing.
[syntax=php]<!-- CONTENT -->
        <div id="grve-content" class="clearfix grve-left-sidebar">
                <div class="grve-content-wrapper">
                        <!-- MAIN CONTENT -->
                        <div id="grve-main-content" role="main">
                                <div class="grve-main-content-wrapper clearfix">
                                        <div class="grve-container">

    <header class="woocommerce-products-header">

               
               
    </header>

               
                       
                <div id="compare-products-messages"></div>

                <div id="compare-products-basket">



       


                </div>

<p class="woocommerce-result-count">
        Showing all 4 results</p>
<form class="woocommerce-ordering" method="get">
        <select name="orderby" class="orderby">
                                        <option value="menu_order" selected='selected'>Default sorting</option>
                                        <option value="popularity">Sort by popularity</option>
                                        <option value="rating">Sort by average rating</option>
                                        <option value="date">Sort by newness</option>
                                        <option value="price">Sort by price: low to high</option>
                                        <option value="price-desc">Sort by price: high to low</option>
                        </select>
        </form>
<div class="woocommerce columns-3">
                        <ul class="products">

                               
                               
                                       
                                        <li class="post-1879 product type-product status-publish has-post-thumbnail product_brand-test product_cat-here-rifles product_tag-aeg product_tag-m4 product_tag-ris first instock sale taxable shipping-taxable purchasable product-type-variable has-children">

        <a href="http://test.co.uk/product/test-m4ph-here-test/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
        <div class="grve-product-item">
                <div class="grve-product-media grve-image-hover">

                        <a href="http://test.co.uk/product/test-m4ph-here-test/">

                               
        <span class="onsale">Sale!</span>
<img width="600" height="464" src="//test.co.uk/wp/wp-content/uploads/2017/07/600x464x1490194863_m4-here-test-12-blue-600x464.jpg.pagespeed.ic.e28EpwrIfB.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="" srcset="//test.co.uk/wp/wp-content/uploads/2017/07/1490194863_m4-here-test-12-blue-600x464.jpg 600w, //test.co.uk/wp/wp-content/uploads/2017/07/1490194863_m4-here-test-12-blue-300x232.jpg 300w, //test.co.uk/wp/wp-content/uploads/2017/07/1490194863_m4-here-test-12-blue-768x594.jpg 768w, //test.co.uk/wp/wp-content/uploads/2017/07/1490194863_m4-here-test-12-blue-1024x792.jpg 1024w, //test.co.uk/wp/wp-content/uploads/2017/07/1490194863_m4-here-test-12-blue-233x180.jpg 233w, //test.co.uk/wp/wp-content/uploads/2017/07/1490194863_m4-here-test-12-blue.jpg 1200w" sizes="(max-width: 600px) 100vw, 600px"/>        <div class="shopswatchinput" prod-img="">
                                        <a class="wcvaswatchinput" data-o-src="http://test.co.uk/wp/wp-content/uploads/2017/07/1490195230_m4-here-test-12-600x464.jpg" style="width:43px; height:25px;">
                            <div class="wcvashopswatchlabel wcvasquare" style="background-color:#000000; width:43px; float:left; height:25px;"></div>
                            </a>
                                                            <a class="wcvaswatchinput" data-o-src="http://test.co.uk/wp/wp-content/uploads/2017/07/1490194863_m4-here-test-12-blue-600x464.jpg" style="width:43px; height:25px;">
                            <div class="wcvashopswatchlabel wcvasquare" style="background-color:#1e73be; width:43px; float:left; height:25px;"></div>
                            </a>
                                        </div>
             
       
                        </a>

                                                <div class="grve-product-content">
                                <div class="grve-product-switcher">
                                        <div class="grve-product-price grve-link-text">
                                               
        <span class="price"><del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>149.99</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>119.99</span></ins></span>
                                        </div>
                                        <div class="grve-add-to-cart-btn grve-link-text">
                                                <a rel="nofollow" href="http://test.co.uk/product/test-m4ph-here-test/" data-quantity="1" data-product_id="1879" data-product_sku="TSTPH-1" class="product_type_variable add_to_cart_button">Select options</a>                                 </div>
                                </div>
                        </div>
                </div>
        </div>
        </a><h2 class="woocommerce-loop-product__title">test M4PH here test</h2>
</li>

                               
                                       
                                        <li class="post-1893 product type-product status-publish has-post-thumbnail product_brand-src product_cat-here-rifles product_tag-aeg product_tag-m4 product_tag-ris  instock sale taxable shipping-taxable purchasable product-type-variable has-children">

        <a href="http://test.co.uk/product/TST-mamba-e-gen2-here-test/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
        <div class="grve-product-item">
                <div class="grve-product-media grve-image-hover">

                        <a href="http://test.co.uk/product/TST-mamba-e-gen2-here-test/">

                               
        <span class="onsale">Sale!</span>
<img width="600" height="464" src="//test.co.uk/wp/wp-content/uploads/2017/07/600x464x1490217391_ge0523tm-3-here-tests-blue-600x464.jpg.pagespeed.ic.USTuTrc3Ln.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="" srcset="//test.co.uk/wp/wp-content/uploads/2017/07/1490217391_ge0523tm-3-here-tests-blue-600x464.jpg 600w, //test.co.uk/wp/wp-content/uploads/2017/07/1490217391_ge0523tm-3-here-tests-blue-300x232.jpg 300w, //test.co.uk/wp/wp-content/uploads/2017/07/1490217391_ge0523tm-3-here-tests-blue-768x594.jpg 768w, //test.co.uk/wp/wp-content/uploads/2017/07/1490217391_ge0523tm-3-here-tests-blue-1024x792.jpg 1024w, //test.co.uk/wp/wp-content/uploads/2017/07/1490217391_ge0523tm-3-here-tests-blue-233x180.jpg 233w, //test.co.uk/wp/wp-content/uploads/2017/07/1490217391_ge0523tm-3-here-tests-blue.jpg 1200w" sizes="(max-width: 600px) 100vw, 600px"/>      <div class="shopswatchinput" prod-img="">
                                        <a class="wcvaswatchinput" data-o-src="http://test.co.uk/wp/wp-content/uploads/2017/07/1490217214_ge0523tm-2-here-test-mamba-600x464.jpg" style="width:43px; height:25px;">
                            <div class="wcvashopswatchlabel wcvasquare" style="background-color:#000000; width:43px; float:left; height:25px;"></div>
                            </a>
                                                            <a class="wcvaswatchinput" data-o-src="http://test.co.uk/wp/wp-content/uploads/2017/07/1490217391_ge0523tm-3-here-tests-blue-600x464.jpg" style="width:43px; height:25px;">
                            <div class="wcvashopswatchlabel wcvasquare" style="background-color:#1e73be; width:43px; float:left; height:25px;"></div>
                            </a>
                                        </div>
             
       
                        </a>

                                                <div class="grve-product-content">
                                <div class="grve-product-switcher">
                                        <div class="grve-product-price grve-link-text">
                                               
        <span class="price"><del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>299.99</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>269.99</span></ins></span>
                                        </div>
                                        <div class="grve-add-to-cart-btn grve-link-text">
                                                <a rel="nofollow" href="http://test.co.uk/product/TST-mamba-e-gen2-here-test/" data-quantity="1" data-product_id="1893" data-product_sku="GE0523TMII-1" class="product_type_variable add_to_cart_button">Select options</a>                                     </div>
                                </div>
                        </div>
                </div>
        </div>
        </a><h2 class="woocommerce-loop-product__title">TST MAMBA E GEN2 here test</h2>
</li>

                               
                                       
                                        <li class="post-1848 product type-product status-publish has-post-thumbnail product_brand-test product_cat-here-rifles product_tag-aeg product_tag-m4 product_tag-ris last outofstock sale taxable shipping-taxable purchasable product-type-variable has-children">

        <a href="http://test.co.uk/product/test-m4pi-ris-here-test/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
        <div class="grve-product-item">
                <div class="grve-product-media grve-image-hover">

                        <a href="http://test.co.uk/product/test-m4pi-ris-here-test/">

                               
        <span class="onsale">Sale!</span>
<img width="600" height="464" src="//test.co.uk/wp/wp-content/uploads/2017/07/600x464x1490194799_product-1bb-blue-600x464.jpg.pagespeed.ic.QV4oeHe5xf.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="" srcset="//test.co.uk/wp/wp-content/uploads/2017/07/1490194799_product-1bb-blue-600x464.jpg 600w, //test.co.uk/wp/wp-content/uploads/2017/07/1490194799_product-1bb-blue-300x232.jpg 300w, //test.co.uk/wp/wp-content/uploads/2017/07/1490194799_product-1bb-blue-768x594.jpg 768w, //test.co.uk/wp/wp-content/uploads/2017/07/1490194799_product-1bb-blue-1024x792.jpg 1024w, //test.co.uk/wp/wp-content/uploads/2017/07/1490194799_product-1bb-blue-233x180.jpg 233w, //test.co.uk/wp/wp-content/uploads/2017/07/1490194799_product-1bb-blue.jpg 1200w" sizes="(max-width: 600px) 100vw, 600px"/><p class="stock out-of-stock">Out of Stock</p>      <div class="shopswatchinput" prod-img="">
                                        <a class="wcvaswatchinput" data-o-src="http://test.co.uk/wp/wp-content/uploads/2017/07/1490189904_product-1-600x464.jpg" style="width:43px; height:25px;">
                            <div class="wcvashopswatchlabel wcvasquare" style="background-color:#000000; width:43px; float:left; height:25px;"></div>
                            </a>
                                                            <a class="wcvaswatchinput" data-o-src="http://test.co.uk/wp/wp-content/uploads/2017/07/1490194799_product-1bb-blue-600x464.jpg" style="width:43px; height:25px;">
                            <div class="wcvashopswatchlabel wcvasquare" style="background-color:#1e73be; width:43px; float:left; height:25px;"></div>
                            </a>
                                        </div>
             
       
                        </a>

                                                <div class="grve-product-content">
                                <div class="grve-product-switcher">
                                        <div class="grve-product-price grve-link-text">
                                               
        <span class="price"><del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>149.99</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>119.99</span></ins></span>
                                        </div>
                                        <div class="grve-add-to-cart-btn grve-link-text">
                                                <a rel="nofollow" href="http://test.co.uk/product/test-m4pi-ris-here-test/" data-quantity="1" data-product_id="1848" data-product_sku="TSTPI-1" class="product_type_variable">Select options</a>                                        </div>
                                </div>
                        </div>
                </div>
        </div>
        </a><h2 class="woocommerce-loop-product__title">test M4PI here test</h2>
</li>

                               
                                       
                                        <li class="post-1862 product type-product status-publish has-post-thumbnail product_brand-test product_cat-here-rifles product_tag-aeg product_tag-m4 product_tag-ris first outofstock sale taxable shipping-taxable purchasable product-type-variable has-children">

        <a href="http://test.co.uk/product/test-TSTpg-here-test/" class="woocommerce-LoopProduct-link woocommerce-loop-product__link">
        <div class="grve-product-item">
                <div class="grve-product-media grve-image-hover">

                        <a href="http://test.co.uk/product/test-TSTpg-here-test/">

                               
        <span class="onsale">Sale!</span>
<img width="600" height="464" src="//test.co.uk/wp/wp-content/uploads/2017/07/600x464x1490196426_product-test-33-blue-600x464.jpg.pagespeed.ic.SGgVKhayB-.jpg" class="attachment-shop_catalog size-shop_catalog wp-post-image" alt="" srcset="//test.co.uk/wp/wp-content/uploads/2017/07/1490196426_product-test-33-blue-600x464.jpg 600w, //test.co.uk/wp/wp-content/uploads/2017/07/1490196426_product-test-33-blue-300x232.jpg 300w, //test.co.uk/wp/wp-content/uploads/2017/07/1490196426_product-test-33-blue-768x594.jpg 768w, //test.co.uk/wp/wp-content/uploads/2017/07/1490196426_product-test-33-blue-1024x792.jpg 1024w, //test.co.uk/wp/wp-content/uploads/2017/07/1490196426_product-test-33-blue-233x180.jpg 233w, //test.co.uk/wp/wp-content/uploads/2017/07/1490196426_product-test-33-blue.jpg 1200w" sizes="(max-width: 600px) 100vw, 600px"/><p class="stock out-of-stock">Out of Stock</p>  <div class="shopswatchinput" prod-img="">
                                        <a class="wcvaswatchinput" data-o-src="http://test.co.uk/wp/wp-content/uploads/2017/07/1490196219_product-test-33-600x464.jpg" style="width:43px; height:25px;">
                            <div class="wcvashopswatchlabel wcvasquare" style="background-color:#000000; width:43px; float:left; height:25px;"></div>
                            </a>
                                                            <a class="wcvaswatchinput" data-o-src="http://test.co.uk/wp/wp-content/uploads/2017/07/1490196426_product-test-33-blue-600x464.jpg" style="width:43px; height:25px;">
                            <div class="wcvashopswatchlabel wcvasquare" style="background-color:#1e73be; width:43px; float:left; height:25px;"></div>
                            </a>
                                        </div>
             
       
                        </a>

                                                <div class="grve-product-content">
                                <div class="grve-product-switcher">
                                        <div class="grve-product-price grve-link-text">
                                               
        <span class="price"><del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>149.99</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>119.99</span></ins></span>
                                        </div>
                                        <div class="grve-add-to-cart-btn grve-link-text">
                                                <a rel="nofollow" href="http://test.co.uk/product/test-TSTpg-here-test/" data-quantity="1" data-product_id="1862" data-product_sku="TSTPG-1" class="product_type_variable">Select options</a>                                   </div>
                                </div>
                        </div>
                </div>
        </div>
        </a><h2 class="woocommerce-loop-product__title">test TSTPG here test</h2>
</li>

                               
                        </ul>

                        </div>
               
                                                </div>
                                </div>
                        </div>
                        <!-- END MAIN CONTENT -->
                                                                <!-- Sidebar -->
                <aside id="grve-sidebar" class="grve-sidebar">
                        <div class="grve-wrapper clearfix">
                                                                <div id="woocommerce_product_search-2" class="grve-widget widget woocommerce widget_product_search"><form class="grve-search" method="get" action="http://test.co.uk/">  <button type="submit" class="grve-search-btn grve-custom-btn"><i class="grve-icon-search"></i></button>  <input type="text" class="grve-search-textfield" id="grve_product_search_595f6ed732cd1" value="" name="s" placeholder="Search for ..."/>  <input type="hidden" name="post_type" value="product"/></form></div><div id="woocommerce_price_filter-2" class="grve-widget widget woocommerce widget_price_filter"><div class="grve-widget-title">Filter by price</div><form method="get" action="http://test.co.uk/product-category/here-rifles/">
                        <div class="price_slider_wrapper">
                                <div class="price_slider" style="display:none;"></div>
                                <div class="price_slider_amount">
                                        <input type="text" id="min_price" name="min_price" value="" data-min="119" placeholder="Min price"/>
                                        <input type="text" id="max_price" name="max_price" value="" data-max="270" placeholder="Max price"/>
                                        <button type="submit" class="button">Filter</button>
                                        <div class="price_label" style="display:none;">
                                                Price: <span class="from"></span> &mdash; <span class="to"></span>
                                        </div>
                                       
                                        <div class="clear"></div>
                                </div>
                        </div>
                </form></div>
                 <br/>
             <div class="widget-area wcva-filter-widget">
                   <aside class="widget woocommerce widget_layered_nav wcva_layered_nav">
                   
            <h3 class="wcva_filter-widget-title">Filter by   power-type</h3>
                     <div class="wcva_filter_widget">                        <a title="Electric" href="http://test.co.uk/product-category/here-rifles/?filter_power-type=electric" class="wcvaswatchinput" rel="nofollow" style="width:43px; height:25px;">
                        <div class="wcvashopswatchlabel wcvasquare  wcva_filter_textblock" style="min-width:43px; ">Electric</div>
                                                </a>
                            </div>                 </aside>
                 </div>
         <br/> 
               
                <div id="text-3" class="grve-widget widget widget_text">                        <div class="textwidget"><p>&nbsp;</p>
</div>
                </div><div id="woocommerce_brand_nav-2" class="grve-widget widget widget_brand_nav widget_layered_nav"><div class="grve-widget-title">Brands</div><select class="wc-brand-dropdown-layered-nav-product_brand"><option value="">Any Brand</option><option value="18">test</option><option value="56">SRC</option></select></div><div id="woocommerce_product_tag_cloud-2" class="grve-widget widget woocommerce widget_product_tag_cloud"><div class="grve-widget-title">Product tags</div><div class="tagcloud"><a href="http://test.co.uk/product-tag/23/" class="tag-cloud-link tag-link-86 tag-link-position-1" style="font-size: 8pt;" aria-label="23 (1 product)">23</a>
<a href="http://test.co.uk/product-tag/1911/" class="tag-cloud-link tag-link-50 tag-link-position-2" style="font-size: 21.285714285714pt;" aria-label="1911 (16 products)">1911</a>
<a href="http://test.co.uk/product-tag/aeg/" class="tag-cloud-link tag-link-218 tag-link-position-3" style="font-size: 13.714285714286pt;" aria-label="AEG (4 products)">AEG</a>
<a href="http://test.co.uk/product-tag/desert-eagle/" class="tag-cloud-link tag-link-63 tag-link-position-4" style="font-size: 10.571428571429pt;" aria-label="DESERT EAGLE (2 products)">DESERT EAGLE</a>
<a href="http://test.co.uk/product-tag/f228/" class="tag-cloud-link tag-link-68 tag-link-position-5" style="font-size: 8pt;" aria-label="F228 (1 product)">F228</a>
<a href="http://test.co.uk/product-tag/fun-pistol/" class="tag-cloud-link tag-link-94 tag-link-position-6" style="font-size: 8pt;" aria-label="Fun Pistol (1 product)">Fun Pistol</a>
<a href="http://test.co.uk/product-tag/g17/" class="tag-cloud-link tag-link-60 tag-link-position-7" style="font-size: 10.571428571429pt;" aria-label="G17 (2 products)">G17</a>
<a href="http://test.co.uk/product-tag/g18/" class="tag-cloud-link tag-link-62 tag-link-position-8" style="font-size: 8pt;" aria-label="G18 (1 product)">G18</a>
<a href="http://test.co.uk/product-tag/g19/" class="tag-cloud-link tag-link-61 tag-link-position-9" style="font-size: 10.571428571429pt;" aria-label="G19 (2 products)">G19</a>
<a href="http://test.co.uk/product-tag/g26/" class="tag-cloud-link tag-link-49 tag-link-position-10" style="font-size: 8pt;" aria-label="G26 (1 product)">G26</a>
<a href="http://test.co.uk/product-tag/g33/" class="tag-cloud-link tag-link-64 tag-link-position-11" style="font-size: 8pt;" aria-label="G33 (1 product)">G33</a>
<a href="http://test.co.uk/product-tag/g34/" class="tag-cloud-link tag-link-65 tag-link-position-12" style="font-size: 8pt;" aria-label="G34 (1 product)">G34</a>
<a href="http://test.co.uk/product-tag/glock/" class="tag-cloud-link tag-link-48 tag-link-position-13" style="font-size: 17.285714285714pt;" aria-label="GLOCK (8 products)">GLOCK</a>
<a href="http://test.co.uk/product-tag/hi-capa/" class="tag-cloud-link tag-link-59 tag-link-position-14" style="font-size: 10.571428571429pt;" aria-label="HI-CAPA (2 products)">HI-CAPA</a>
<a href="http://test.co.uk/product-tag/mp-40/" class="tag-cloud-link tag-link-55 tag-link-position-15" style="font-size: 8pt;" aria-label="M&amp;P.40 (1 product)">M&amp;P.40</a>
<a href="http://test.co.uk/product-tag/m4/" class="tag-cloud-link tag-link-216 tag-link-position-16" style="font-size: 13.714285714286pt;" aria-label="M4 (4 products)">M4</a>
<a href="http://test.co.uk/product-tag/m92/" class="tag-cloud-link tag-link-57 tag-link-position-17" style="font-size: 22pt;" aria-label="M92 (18 products)">M92</a>
<a href="http://test.co.uk/product-tag/p226/" class="tag-cloud-link tag-link-52 tag-link-position-18" style="font-size: 15.857142857143pt;" aria-label="P226 (6 products)">P226</a>
<a href="http://test.co.uk/product-tag/ppk/" class="tag-cloud-link tag-link-67 tag-link-position-19" style="font-size: 8pt;" aria-label="PPK (1 product)">PPK</a>
<a href="http://test.co.uk/product-tag/python/" class="tag-cloud-link tag-link-211 tag-link-position-20" style="font-size: 16.571428571429pt;" aria-label="PYTHON (7 products)">PYTHON</a>
<a href="http://test.co.uk/product-tag/revolver/" class="tag-cloud-link tag-link-210 tag-link-position-21" style="font-size: 16.571428571429pt;" aria-label="REVOLVER (7 products)">REVOLVER</a>
<a href="http://test.co.uk/product-tag/ris/" class="tag-cloud-link tag-link-217 tag-link-position-22" style="font-size: 13.714285714286pt;" aria-label="RIS (4 products)">RIS</a>
<a href="http://test.co.uk/product-tag/usp/" class="tag-cloud-link tag-link-51 tag-link-position-23" style="font-size: 14.857142857143pt;" aria-label="USP (5 products)">USP</a></div></div><div id="woocommerce_recently_viewed_products-2" class="grve-widget widget woocommerce widget_recently_viewed_products"><div class="grve-widget-title">Recently Viewed Products</div><ul class="product_list_widget">
<li>
        <a href="http://test.co.uk/product/399b-spring-bb-pistol/">
                <img width="233" height="180" src="//test.co.uk/wp/wp-content/uploads/2017/07/233x180x53269489pi2-233x180.jpg.pagespeed.ic.XTP5tww1_f.jpg" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" srcset="//test.co.uk/wp/wp-content/uploads/2017/07/53269489pi2-233x180.jpg 233w, //test.co.uk/wp/wp-content/uploads/2017/07/53269489pi2-300x232.jpg 300w, //test.co.uk/wp/wp-content/uploads/2017/07/53269489pi2-768x594.jpg 768w, //test.co.uk/wp/wp-content/uploads/2017/07/53269489pi2-600x464.jpg 600w, //test.co.uk/wp/wp-content/uploads/2017/07/53269489pi2.jpg 900w" sizes="(max-width: 233px) 100vw, 233px"/>            <span class="product-title">399B SPRING BB PISTOL</span>
        </a>
                <del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>19.99</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>7.99</span></ins></li>

<li>
        <a href="http://test.co.uk/product/batman-here-mask/">
                <img width="233" height="180" src="//test.co.uk/wp/wp-content/uploads/2017/07/233x180x42943747B1-233x180.jpg.pagespeed.ic.L_Wq16Y8hy.jpg" class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image" alt="" srcset="//test.co.uk/wp/wp-content/uploads/2017/07/42943747B1-233x180.jpg 233w, //test.co.uk/wp/wp-content/uploads/2017/07/42943747B1-300x232.jpg 300w, //test.co.uk/wp/wp-content/uploads/2017/07/42943747B1-768x594.jpg 768w, //test.co.uk/wp/wp-content/uploads/2017/07/42943747B1-600x464.jpg 600w, //test.co.uk/wp/wp-content/uploads/2017/07/42943747B1.jpg 900w" sizes="(max-width: 233px) 100vw, 233px"/>          <span class="product-title">Batman here Mask</span>
        </a>
                <del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>19.99</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">&pound;</span>17.99</span></ins></li>
</ul></div>                     </div>
                </aside>
                <!-- End Sidebar -->
                </div>
        </div>
        <!-- END CONTENT -->[/syntax]

CSS is impossible beause Wordpress and Woocommerce spread it over god knows how many files!
But I'm convinced one is for the left column and one for the right.
But I'
m convinced one is for the left column and one for the right.


CSS is impossible beause Wordpress and Woocommerce spread it over god knows how many files!
But I'm convinced one is for the left column and one for the right.


Attachments:
File comment: screen grab
ss.jpg
ss.jpg [ 103.32 KiB | Viewed 937 times ]

_________________
Love PHP. Love CSS. Love learning new tricks too.
All the best from the United Kingdom.
Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 9 posts ] 

All times are UTC - 5 hours


Who is online

Users browsing this forum: No registered users and 2 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB® Forum Software © phpBB Group