Cyber Week Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #179607
    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

    #179637
    Tom
    Lead Developer
    Lead Developer

    Give this CSS a try:

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

    Perfect!!

    thank you very much

    Joanne

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

    }

    }

    #179718
    Tom
    Lead Developer
    Lead Developer
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.