Background difference

1
Hello people!! I have a problem with the register background. I have put a 3-colum layout with auto-fill. Each column got an image, and underneath 2 containers with text, the problem is that 2 first columns got the same frame background, but third is smaller, all images and containers got the same properties. The only difference between the containers is that the last one got less text than the 2 previous column containers. If the screen have size enough all is good, but when I change it to a smaller screen the problem appears. I need my app to be responsive, so some easy solutions were dismissed. Someone knows why this problem happends and how to solve it?     Appreciate it :)
asked
5 answers
1

Hi Adolfo, 

 

You may try add some custom CSS to have all Cards with same height

Check this learning path:

https://academy.mendix.com/link/modules/473/lectures/3807/-2.4.1-Applying-Padding

 

Regards

answered
6

Hi Adolfo,

 

Try with custom css to align the code styling i hope the below code will help you to experiment and try the same in your application.

https://www.quackit.com/html/html_editors/scratchpad/?example=/css/grid/examples/cards_auto-fill_align-items_stretch

answered
1

Hi Adolfo ,

I will just offer a simple solution . A line can have a maximum width of ‘12’ . You can adjust the widths of the columns you created to be 4-4-4 by manually selecting instead of auto-fill. So they're all the same width regardless of the text. I hope it helps

Regards
Ridvan

answered
1

Hello César,

Have you tried a Card action with image Building blocks before?

Maybe it will work.

 

Kind regards,

Halil

answered
0

Hey there,

classic styling issue you got there.

A before mentioned comment about using a card class might do the trick. if not you could go for setting a fixed height by adding your own class. I have put an example below:

 

.dasboard-card{
  height: 30vh; //This sets the height to 30% of your viewport height
}

 

answered