Padding on desktop vs mobile

Sparkling
1

Hi,

In order to align the list of countries with the same height, I had to create bottom padding as per my research online
http://www.travellingfix.com/destinations/

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?

Thanks

2

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,
Support

3

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

4

You are most welcome here :slight_smile:

5

Hi

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