How to layout the grid output of product

Good Day,

How can I get the output of the grid setting in store presentation module of marketpress to output the products in an equal column height in each row? If three products are output to a row I want the row height to default to the height of the tallest product returned.

Thanks

Bradley

  • Bojan Radonic

    Hey Bradley,

    Hope you're doing well today :slight_smile:

    This should be possible to achieve with some custom CSS, would you mind linking to the page where I can see those products so I can take a look? I've tried checking your site where you have MarketPress installed but Store pages returned 404 so I'm not sure where to find it.

    You can also grant us temporary admin access via our WPMU DEV Dashboard plugin, you'll find more information on how to do that here: https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Cheers,
    Bojan

  • Bradley

    This is in a local test environment.
    This is my element selector

    .mp_products .mp_product_item {
        border-top: 1px solid transparent;
        box-shadow: -5px -5px 50px  1px #888888;
        padding: 20px ;
    }

    If I add it to my style.css in my child theme it is supercedded by MP's css. If I add it to the customizer (i.e. the parent-theme) additional css it is not. I cannot find that selector in the default.css of marketpress.

    That's pretty much the issue. I can't have it in the customizer as the user could see and delete it. I am happy to implement in any way but I need specifically to control the layout and look of the product feed and this is as close as I have gotten. I also need to output the content in a flex container instead of the default manner to keep the item's boxed aligned in height.
    screen shots to follow.

    Bradley

  • Bojan Radonic

    Hey again Bradley,

    It's hard to say without actually checking the page but if you already know the CSS that will fix this overriding that shouldn't be a problem, usually just adding some specificity to the selector will get the job done, in case you're targeting "mp_product_item" you can try this selector instead:

    #mp-products.mp_products .mp_products_items .mp_product_item

    If that doesn't work you can try using !important for those properties just so you can check whether the CSS that you're using is good or not. You'll find more information about important declaration here: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception

    I'd happily check that for you if I could see the page where this grid is :slight_frown:

    Let me know if the above selector works for you in case you need just a selector.

    Cheers,
    Bojan

  • Bojan Radonic

    Hey agian,

    I posted before I actually seen those screenshots, from what I can see this should be possible to do by adding minimum height for product image holder. You can try adding the following to your child theme style.css, something like this should work:

    .mp_product_images {
        min-height: 320px;
    }

    Keep in mind that the numeric value should match the height of your largest image (largest in height).

    Let me know if this works :slight_smile:

    cheers,
    Bojan

  • Bradley

    It will be some time before I can do that however as I am using a new hosting provider and wildcards are not working yet. In the mean time I can tell you that the visual developer plugin is looking and modifying one of theses elements:
    bodydiv.hfeed.site.grid-container.container.grid-parentdiv.site-contentdiv.content-area.grid-parent.mobile-grid-100.grid-75.tablet-grid-75main.site-mainarticle.post-5.page.type-page.status-publishdiv.inside-articlediv.entry-contentdivdiv

    Regarding #mp-products.mp_products .mp_products_items .mp_product_item
    In which css file are they contained in MP I can't find them. It would be great if they where in the default.css in marketpress. I copied it into my own and gave it a different name. Then I could use that dropdown menu for users to choose a layout. I tried to add my modified element setting there but it did not work.
    And again I cannot modify it within the styesheet of my child theme. I can only do it with the parent in the customizer. I can find those elements using chrome or any development tools.

  • Bojan Radonic

    I can't say I used visual developer plugin before so I'm not sure how this works to be honest :slight_frown:

    Regarding #mp-products.mp_products .mp_products_items .mp_product_item
    In which css file are they contained in MP I can't find them. It would be great if they where in the default.css in marketpress

    You won't find this selector in any of the CSS files, I just added additional classes to the selector so it overrides the CSS that is in MarketPress stylesheets, this is called adding specificity to the CSS selector. You can read more about that in the same link I posted above when I was mentioning important declaration.

    Either way you shouldn't even be looking for these styles in the MarketPress files or for that matter any files at all with regards to adding CSS. Editing files is never a good practice anyway cause everything gets overwritten on first plugin/theme update. You should always look for the classes/IDs and CSS in general using developer tools and then just copy CSS to new stylesheets that won't be affected by any updates. That's what you use child theme style.css for, or plugins such as Simple Custom CSS.

    And again I cannot modify it within the styesheet of my child theme. I can only do it with the parent in the customizer. I can find those elements using chrome or any development tools.

    Not really sure what you mean here, which theme do you have activate on your site?

    I think it is more like the box size that matters I fixed it by making the row flex not fixed. Sorry Columns.

    Not really sure what you mean by this, did you manage to figure this out?

    Please let me know,
    Bojan

  • Bradley

    YES! Kind of.... see pics. In order to make it work I had to make a really custom selector but it breaks responsiveness. :disappointed: . I am going to have to create a media query to change it back to block but that seems like a Kluge man. Still scratching head.

    I put this into a custom layout selectable in the store presentation area of store settings:
    Hoping it can be used with any theme. I am using generatepress for this test. My favorite theme.

    section.hfeed.mp_products.mp_products-grid > div.mp_products_items
    {
      display: flex;
    }

    I would like to nail it down better than this.

    Bradley

  • Bojan Radonic

    That's looking pretty good, didn't realize "display: flex;" would be able to change that in that way. I tried setting up the theme that you're using that I found here but the layout doesn't look anything like yours on those screenshots.

    Anyway yes, using that in a media query would probably do.

    In case you need anything else please setup that live site cause it's pretty hard trying to help with CSS without having the same environment.

    Cheers,
    Bojan

  • Bradley

    create a new MP .css from the default as in "how to easily them MP" article. name is something else and put it in a folder you create at /wp-content/marketpress-themes/ and then select it from , the store presentation module in store settings, mines called storefrunt, then add:

    .mp_products .mp_product_item {
        border-top: 1px solid transparent;
        box-shadow: -5px -5px 50px  1px #888888;
        padding: 20px;
    }
    
     section.hfeed.mp_products.mp_products-grid > div.mp_products_items
    {
      display: flex;
    }

    I am just not at all sure where I would put the media query statement

  • Bojan Radonic

    Hey,

    All you have to do is wrap the CSS code you have with media query, so something like this:

    @media only screen and (min-width: 1200px) {
    .mp_products .mp_product_item {
        border-top: 1px solid transparent;
        box-shadow: -5px -5px 50px  1px #888888;
        padding: 20px;
    }
    
     section.hfeed.mp_products.mp_products-grid > div.mp_products_items
    {
      display: flex;
    }
    }

    This means the code inside the media query will work on resolutions with minimum width of 1200px so everything below that will not be affected.

    You'll find more info about media queries here: http://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Cheers,
    Bojan