Page 1 of 1
Minimum Margin left/right and centered DIV
Posted: Thu Jul 06, 2017 7:40 am
by simonmlewis
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?
Re: Minimum Margin left/right and centered DIV
Posted: Thu Jul 06, 2017 8:24 pm
by Celauran
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.
Re: Minimum Margin left/right and centered DIV
Posted: Fri Jul 07, 2017 5:43 am
by simonmlewis
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.
Code: Select all
@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.
Re: Minimum Margin left/right and centered DIV
Posted: Fri Jul 07, 2017 5:55 am
by Celauran
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:Code: Select all
@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.
Re: Minimum Margin left/right and centered DIV
Posted: Fri Jul 07, 2017 6:01 am
by simonmlewis
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??
Re: Minimum Margin left/right and centered DIV
Posted: Fri Jul 07, 2017 6:16 am
by Celauran
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.
Re: Minimum Margin left/right and centered DIV
Posted: Fri Jul 07, 2017 6:22 am
by simonmlewis
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.
Re: Minimum Margin left/right and centered DIV
Posted: Fri Jul 07, 2017 6:25 am
by Celauran
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.
Re: Minimum Margin left/right and centered DIV
Posted: Fri Jul 07, 2017 6:41 am
by simonmlewis
HTML from Opening area of content to closing.
Code: Select all
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">£</span>149.99</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</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">£</span>299.99</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</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">£</span>149.99</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</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">£</span>149.99</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</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> — <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> </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&P.40 (1 product)">M&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">£</span>19.99</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</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">£</span>19.99</span></del> <ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">£</span>17.99</span></ins></li>
</ul></div> </div>
</aside>
<!-- End Sidebar -->
</div>
</div>
<!-- END CONTENT -->
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.[/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.