Need help for the alignment of my button

[jemz]

Hi can I ask some help please. My problem is that when I have a long title of my Item my display looks horrible . I want my panel height will auto adjust if there is long title and the button “ADD TO CART” will align together. just like this example

Here is my codepen.

Thank you in advance.

[PaulOB]

HI,

You can’t really do that with floats as they snag and don’t get the equal heights. They all need to be nested flexboxes.

Roughly like this:

The above is only for desktops as your small screen versions weren’t working anyway so you will have to build the smaller screen sizes as required (or use media queries just to apply the styles I added for larger screens if indeed you do have a working version for smaller screens).

I added a class of myRow to the exisiting parent row so that we don’t break all of bootstrap.

   <div class="row main-wrapper myRow">
      <div class="col-xs-12 col-md-3">

Then I just added this CSS using that class to target existing elements.

    /* added myRow class to avoid breaking whole of bootstrap */
    .myRow,
    .myRow .row {
      display: flex;
      flex-wrap: wrap;
    }

    .myRow .col-md-9 {
      float: none;
      display: flex;
      flex-wrap: wrap;
    }

    .myRow .panel_product {
      height: auto;
      float: none;
    }

    .myRow .panel_product .panel,
    .myRow .panel_product .panel-body {
      display: flex;
      flex-direction: column;
      flex: 1 0 0%;
    }

    .myRow .action-wrapper {
      margin-top: auto;
    }

With my code added the display looks like this:

[jemz]

Hi Paul ,Thank you it works , but I have problem if I only have few product to display example 1 or 2, the panel width is getting small when viewed in desktop ?.

here is my pen

Thank you in advance.

[PaulOB]

@jemz

but I have problem if I only have few product to display example 1 or 2,

I’m not following or missing something important

If there was one item I’d expect to see one item at the width you set (25%).

That happens to look the same as it would without my code so what am I missing? Or is this a specific browser issue.

(Note on small screen single column display you need to remove (or increase that 6vw height on panel-img-top.)

[PaulOB]

@PaulOB

Or is this a specific browser issue.

Ok I see a problem in Firefox and the element is squashed a bit. Try adding the following code;

  .myRow .row {
      flex:1 0 0%;
    }

[jemz]

Thank you so much Paul, it works now . Yes I’m using firefox I forgot to mention.

[jemz]

Hi Paul,

I have problem if I will add another filter to the left side, when the display are only 1-4 Items the buttons are too far from the Title of the item. but if morethan 4 items it works fine.

I’m using firefox
screen resolution 1920x1080

here is the codepen

Thank you in advance.

[PaulOB]

Remove the first .myRow from the flex rule here.

e.g. here in this rule

 .myRow,
    .myRow .row {
      display: flex;
      flex-wrap: wrap;
    }

Change it to this only:

    .myRow .row {
      display: flex;
      flex-wrap: wrap;
    }

[jemz]

Thank you so much Paul, it works now