[Resolved] Related Products woocommerce area re-size for phones

[Joanne Smith]

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

https://shop.glassvinylgraphics.com.au/wp-content/uploads/2016/03/Screenfly-Test-Your-Website-at-Different-Screen-Resolutions-2016-03-16-12-33-21.png

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

[Tom]

Give this CSS a try:

@media (max-width: 768px) {
    .woocommerce ul.products li.product, 
    .woocommerce-page ul.products li.product {
        width: 100%;
    }
}

[Joanne Smith]

Perfect!!

thank you very much

Joanne

[Joanne Smith]

last thingy

the wooCommerce product title — for the phone needs to be reduced

https://shop.glassvinylgraphics.com.au/wp-content/uploads/2016/03/Screenfly-Test-Your-Website-at-Different-Screen-Resolutions-2016-03-16-19-00-57.p

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;

}

}

[Tom]

Glad it worked 🙂

[Author]

Posts