Archived topic
Related Products woocommerce area re-size for phones
4 replies · Started by Joanne Smith on March 15, 2016
I had a quick look on my phone and spotted a small thing that may be fixed with some css
http://quirktools.com/screenfly/#u=https%3A//shop.glassvinylgraphics.com.au/&w=320&h=533&a=36&s=1
The related products area at the bottom of the page
is it possible to have these drop under one another rather than stack side by side and have the select options button over lap --
thanks
Joanne
Give this CSS a try:
@media (max-width: 768px) {
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: 100%;
}
}Perfect!!
thank you very much
Joanne
last thingy
the wooCommerce product title -- for the phone needs to be reduced
This is the CSS I am using that needs to be adjusted or added to
@charset "utf-8";
/* CSS Document */
.sidebar .widget {
padding: 0;
background-color: transparent;
}
.sidebar .widget > * {
padding: 20px;
background-color: #ebeeef;
border: 1px solid #cecece;
}
.sidebar .widget h4.widget-title {
padding-top: 5px;
padding-bottom: 5px;
color: #d7e4ea;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
background-color: #5a8ea6;
margin-bottom: 0px;
}
.main-navigation .main-nav > ul > li:not(:last-child) {
margin-right: 10px;
}
ul.products .count { display:none !important; }
.product-categories .children {
margin-left: 1.5em;
padding-top: 5px;
}
.product-categories .children li:last-child {
padding-bottom: 0;
}
@media (max-width: 768px) {
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: 100%;
}
}
@media (max-width: 768px) {
h1 {
font-size: 25px;
}
}
.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {
background-color:#FC0 !important;
color:white !important;
text-shadow: transparent !important;
box-shadow: none;
border-color:#FF9900 !important;
}
.woocommerce #content input.button:hover, .woocommerce #respond input#submit:hover, .woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover, .woocommerce-page #content input.button:hover, .woocommerce-page #respond input#submit:hover, .woocommerce-page a.button:hover, .woocommerce-page button.button:hover, .woocommerce-page input.button:hover {
background-color:#FC0 !important;
color:white !important;
text-shadow: transparent !important;
box-shadow: none;
border-color:#FF9900 !important;
}
.woocommerce #content input.button, .woocommerce #respond input#submit, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce-page #content input.button, .woocommerce-page #respond input#submit, .woocommerce-page a.button, .woocommerce-page button.button, .woocommerce-page input.button {
background-color:#FC0 !important;
color:white !important;
text-shadow: transparent !important;
border-color:#FF9900 !important;
}
.woocommerce #content input.button.alt:hover, .woocommerce #respond input#submit.alt:hover, .woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce-page #content input.button.alt:hover, .woocommerce-page #respond input#submit.alt:hover, .woocommerce-page a.button.alt:hover, .woocommerce-page button.button.alt:hover, .woocommerce-page input.button.alt:hover {
background-color:#FC0 !important;
box-shadow: none;
text-shadow: transparent !important;
color:white !important;
border-color:#FF9900 !important;
}
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
text-align: center;
color: #F00; /* This is what you MAY want to change color */
font-weight: 200;
font-size: 1em;
}
.woocommerce div.product span.price, .woocommerce div.product p.price, .woocommerce #content div.product span.price, .woocommerce #content div.product p.price, .woocommerce-page div.product span.price, .woocommerce-page div.product p.price, .woocommerce-page #content div.product span.price, .woocommerce-page #content div.product p.price {
color: #F00; /* Change this */
font-size: 1.25em;
text-align: center;
}
.woocommerce-price-suffix {
display: none;
}
.page-header-image.grid-container {
max-width: 100%;
}
.page-header-image img {
width: 100%;
}
.page .wpb_single_image .vc_figure {
display: inherit;
}
.vc_transform .inside-article {
padding-top: 0;
}
@media (max-width: 768px) {
.vc_non_responsive .vc_row .vc_col-sm-3 {
width: 100%;
}
.vc_column-inner h1 {
font-size: 20px !important;
}
}
@media (max-width: 768px) {
.vc_column_container {
width: 100% !important;
}
@media (max-width: 768px) {
.entry-content h1 {
font-size: 60px !important;
}
}
@media (max-width: 768px) {
.entry-content h2 {
font-size:30px !important;
}
}
Glad it worked :)