Need to edit CSS on MarketPress

I can't seem to get the css right for my marketpress store.. you guys help me and it looks great.. then there's a problem on different size devices and a difference between single product view and grid view

the buy now button and the price need to be aligned under the the product image for grids - and depending on device it's not... then on the individual product pages, it's not aligned on full screen, but is on mobile.

Support Access enabled.

  • Huberson

    Hi tristajensen,
    Please add the below CSS at the bottom of your custom CSS file, or use "Additional CSS" options from theme customizer.

    /* grid align */
    .mp_grid .mp_one_tile {
    	margin: 0 !important;
        flex: 1 50px;
    	padding: 1em;
    }
    
    #mp_product_list {
        display: flex;
        max-width: 100%;
        flex-wrap: wrap;
    }
    
    @media only screen and (min-width: 800px) {
        .full-width-content .content {
    		max-width: 100%;
    		padding-left: 1em;
    		padding-right: 1em;
        }
    }
    
    .full-width-content .content {
    	max-width: 100%;
    	padding-left: 1em;
    	padding-right: 1em;
    } 
    
    /* single product align */
    @media only screen and (min-width: 741px) {
    .mp_product_image_single {
    	display: block;
        margin: 0 auto !important;
    }
    
    .type-product .kk-star-ratings.rgt {
        float: none;
    	margin: 0 auto;
    }
    
    div.mp_product_meta {
    	min-height: 60px;
    }
    
    .mp_product_meta a.mp_link_buynow {
    	right: 0;
    }
    div.mp_product_meta span.mp_product_price {
        float: none;
        position: relative;
        top: 0;
        right: 0;
        max-width: 60px;
        margin: 0 auto;
        display: block;
        padding: 0;
        padding-top: .6em;
    	padding-bottom: .6em;
        line-height: 20px;
        font-weight: bold;
        font-size: 20px;
        text-align: center;
    
    }
    .mp_product_meta a.mp_link_buynow {
        right: unset;
        float: none;
        display: block;
        max-width: 130px;
        margin: 0 auto;
        text-align: center;
    }
    
    div#mp_related_products {
        margin-top: 10px;
    }
    }

    You might might also need to add some JavaScript code to remove the "alignleft" class from single product listing. They can be added under "Appearance > Custom JavaScript" menu.

    var mp_product_image_single = document.getElementsByClassName("mp_product_image_single");
    mp_product_image_single[0].classList.remove("alignleft");

    If you have issue making those changes, feel free to reply here and we will be happy to provide you with more assistance.

    Regards,
    Huberson

  • Huberson

    Hi,
    You don't have to modify the custom CSS files you already have, the provided CSS could be added using theme customizer instead to override the existing code.

    If you have modified your custom CSS after I provided the above code, you might need to revert those changes to make sure nothing are conflicting with them. And add the CSS as shown in the screencast.
    You also need to add the custom JavaScript, as it helps in aligning single product view.

    Please let us if there is any modification required once you apply those changes.

    Best,
    Huberson