Woo commerce product archive page Css issue WordPress
- SOLVED
Hi,
So i was able to change my product archive page to show only 2 columns of products and when it gets to iphone size (320px i bleive) it drops to 1 column.
However i am having a weird issue that whenever the screen is resized to the equivalent of an ipad in landscape mode around 1190px the 2 products that were perfectly sync horizontally are no longer in sync.
I am posting my custom css that is how i achieved the 2 product column look.
BTW this did not happen before i made an update ( i updated both my theme main file, {not the child} and woo commerce but i only noticed this after doing both updates so im not sure what caused it)
Weebsite www.Geekspanama.com
/*white background*/
body .container-wrap{
background-color: #ffffff!important;
}
div.pricing-column.no-highlight.accent-color {
background-color: #F4F4F4;
padding-left: 3px;
}
/* esto modifica el tamaño del texto del menu */
header#top nav > ul > li > a {
font-size: 2.1em;
}
/* altera el menu de alguna manera */
.sf-menu li {
font-size: 2.1em;
}
/* makes error messages bigger */
.woocommerce-error {
font-weight: bold;
font-size: 15px;
}
.woocommerce .form-row.terms {
float: right;
}
/* checkout thumbnails increase in size */
.woocommerce table.cart img, .woocommerce #content table.cart img, .woocommerce-page table.cart img, .woocommerce-page #content table.cart img {
width: 150px!important;
height: 150px!important;
}
/* This creates the two collums and converts it to 1 when it goes below 320px (iphone)*/
body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product {margin: 0 2% 20px 2% !important;text-align:center;}
body.woocommerce ul.products li.product a img, body.woocommerce-page ul.products li.product a img{display:block;max-width:90% !important;margin:0 auto 15px auto !important;}
body.woocommerce .products .star-rating, body.woocommerce-page .products .star-rating{margin:5px auto !important;}
@media (min-width:321px){
body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product {width: 46% !important;}
}
@media (max-width:320px){
body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product {width: 96% !important;}
}
.wsl_connect_with_provider {
float: left;
margin-right: 5px;
}
.woocommerce-page form .form-row {
margin-top: 30px;
}
.woocommerce #payment .terms,.woocommerce-page #payment .terms {
font-size: 15px;
font-weight: bold;
}
/* makes product names H3 */
.woocommerce ul.products li.product h3, .woocommerce-page ul.products li.product h3 {
font-size: 24px !important;
line-height: 24px !important;
margin-top: 10px !important;
}
@media (max-width:320px){
.nwlp-map-container {display: none;
}}
/* changes price color */
.amount{
color: #00C6EE;
font-weight: bold;
}
/* to remove links for log in/out */
.tml-action-links{
display:none;
}
/* to eliminate sales badge*/
.onsale{
display:none;
}
.woocommerce .products .price {
font-size: 1.75em;
}
/* this makes the text in product variation an h2 */
.woocommerce-page div.product form.cart .variations td.label {
color: #444;
letter-spacing: -0.5px;
font-weight: normal;
-webkit-font-smoothing: antialiased;
font-family: 'OpenSansSemiBold';
font-size: 22px;
line-height: 36px;
margin-bottom: 10px;
}
/* box variation purple and bigger */
.woocommerce div.product form.cart .variations select, .woocommerce #content div.product form.cart .variations select, .woocommerce-page div.product form.cart .variations select, .woocommerce-page #content div.product form.cart .variations select{
height: 40px;
background-color: #AD85F6;
color: #ffffff;
font-weight: bold;
}
/* variation edit */
.woocommerce div.product form.cart, .woocommerce #content div.product form.cart,
.woocommerce-page div.product form.cart, .woocommerce-page #content div.product form.cart {
/* margin-bottom: 3em!important; */
margin-bottom: 5px;
!important;
}
/* this makes shop on the menu bold */
li#menu-item-3148.menu-item.menu-item-type-post_type.menu-item-object-page.menu-item-3148 {
font-weight:bold;
}
@media (max-width:320px){
.woocommerce div.product form.cart .button, .woocommerce-page div.product form.cart .button,
.woocommerce #content div.product form.cart .button, .woocommerce-page #content div.product form.cart .button {
margin-left: 5px;}
.woocommerce #content table.cart td.actions .button, .woocommerce #content table.cart td.actions .input-text,
.woocommerce #content table.cart td.actions input, .woocommerce table.cart td.actions .button,
.woocommerce table.cart td.actions .input-text, .woocommerce table.cart td.actions input,
.woocommerce-page #content table.cart td.actions .button, .woocommerce-page #content table.cart td.actions .input-text,
.woocommerce-page #content table.cart td.actions input, .woocommerce-page table.cart td.actions .button,
.woocommerce-page table.cart td.actions .input-text, .woocommerce-page table.cart td.actions input {
width: 100%;
margin-top: 7px;
}
}
Answers (3)
isp_charlie answers:
add this to last line of your css
@media (min-width: 321px){
body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product {
width: 45% !important;
display: inline-block!important;
float: none!important;
clear: none!important;
vertical-align: middle;
}
@media (max-width: 320px){
body.woocommerce-page ul.products,
body.woocommerce ul.products { text-align:center}
body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product {
width: 90% !important;
display: inline-block!important;
float: none!important;
clear: none!important;
vertical-align: middle;
}
}
dipka comments:
This worked wonderfully thanks
Sabby Sam answers:
Hi,
Add this css, it should work.
@media screen and (max-width: 1200px){
body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product {
width: 46% !important;
min-height: 500px;
}
}
@media screen and (max-width: 960px){
body.woocommerce ul.products li.product, body.woocommerce-page ul.products li.product {
width: 46% !important;
min-height: 420px;
}
}
and so on.
If it does work, please appropriate it to work in everywhere.
Thanks
