Padding on desktop vs mobile


In order to align the list of countries with the same height, I had to create bottom padding as per my research online

However you can see on the 2nd row you see large white space at the bottom. On mobile, it’s all padded badly - how to overcome the alignment of text height for each row?


Hello there,

I hope you are doing well today.

You can use the following CSS code to fix the padding on mobile by going to Appearance > Customize > Additional CSS and pasting it there.

/*Mobile list padding*/
@media screen and (max-width: 350px) and (min-width: 699px) {
#panel-21-3-0-0> .panel-widget-style, #panel-21-3-1-0> .panel-widget-style, #panel-21-5-0-0> .panel-widget-style,#panel-21-5-1-0> .panel-widget-style {
    padding-bottom: 10px;

Best Regards,

Thanks for the fast reply, it’s a good service on here!

You are most welcome here :slight_smile:


This works fine for mobile however on desktop shows padding on the top of each panel widget-

How do I align them all top? I have tried looking online and tried this in css…

#pgc-x-x-x.panel-grid-cell {
display: inline-block;
float: none !important;
vertical-align: middle; }

Thanks again