Black Friday Sale! Get up to $40 off GP Premium!Learn more

Reply To: Related Products woocommerce area re-size for phones

Home Forums Support Related Products woocommerce area re-size for phones Reply To: Related Products woocommerce area re-size for phones

#179666
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;

}

}