These buttons are now mis-aligned?

Have you already solved this? They look quite correct to me on your page.

No, I haven’t done anything; I am waiting, hoping someone can give me some instructions I can try. Not sure why you would not be seeing the issue on your end?

I tested it with Chrome and Firefox. It still looks good.

Hi @mikehende ,

The issue seems to be with responsiveness, if the paragraph content of all cards are of separate lengths then the buttons are misaligned.

The reason @threadi could not catch the problem is maybe due to his screen width, maybe you can try zooming in and @mikehende maybe you can try zooming out until all the paragraphs take up same number of rows.

To fix this, you might need to play around with the CSS and perhaps even the HTML structure, so do you have access to it @mikehende ?

One way to get buttons to be consistently positioned is to absolute position them within each item’s overall container, which itself has a fixed height. The problem with fixed height is the desired height may vary depending on viewport width. You will likely need a series of media queries to define a good height at various viewport widths. Thus you’d need to ensure the text components never exceed the height available, or else some text will overflow or be clipped.

Maybe a better approach would be to use one of the more advanced CSS layout models such as grid or flexbox. They each support an end alignment property that will consistently position the buttons.

it could be due to my monitor’s setup guys, I am only now noticing this. I have my large monitor split into 6 equal-sized browser windows. In down-restored view which is what I use mostly to switch between windows, those buttons are mis-aligned. But when I expand the window to full screen, the buttons show fine as normal.

Does this mean that there’s nothing wrong and nothing I need to do please?

• This reply was modified 2 days, 21 hours ago by mikehende.

Successful alignment depends on the viewport width and the amount of text above the button. When the text all takes up the same number of rows, the buttons align. Different row counts mean mis-alignment. You cannot be sure any random user will always see all text with the same number of rows. If alignment is important to you, you need a different CSS solution.

Now with the viewport hint I can also see it when I use a viewport smaller than 1200. However, the shift then only happens because the texts above have different lengths and no longer have enough width with smaller viewports. This pushes the buttons down for some of the boxes.

You should get a solution for this from your WPBakery theme. As this is a commercial theme, we can’t help you here in the forum. It is best to contact their support: https://support.wpbakery.com

Thank you. ??