Quick Css, background color

Hey jinchaiw,

Please provide a link to the page/site in question.

Best regards,
Jordan Shannon

Hi,
Add the following to quick css:

table, .main_color table caption, .main_color tr:nth-child(even), .main_color .pricing-table>li:nth-child(even), .main_color tr:nth-child(odd){ background-color: transparent !important; color:white!important; }

.avia-data-table-wrap.avia_scrollable_table{
border:1px solid #fff!important;
}

Let me know if this works for you.

Best regards,
Jordan Shannon

Hi,

1. You can specify CSS for the second grid that contains content. Please try this code when you have already put a table:

.avia-builder-el-15 .avia-data-table-wrap {border: 1px solid #ed3c98;}

2. You can set the mobile behavior for grids. You can choose between Default: Each cell is displayed on its own, or Cells appear beside each other, just like on big screens.

If you choose the default, the elements stack on top of each other, and because your second row has the text before the image, that’s how it will show in mobile as well. What you can do is create an extra grid row that has the image before the text, and will only be visible on mobile. Give it a Section ID like mobile-only, and give your original second a Section ID like desktop-only. Then use this code in Quick CSS:

@media only screen and (max-width: 768px) {
   .desktop-only {display: none !important }
}
@media only screen and (min-width: 768px) {
   .mobile-only {display: none !important }
}

This way, your desktop-only grid row is hidden for screens smaller than 768px, and your mobile-only grid row is hidden for bigger screens.

I hope that helps!

Best regards,
Sarah

Hi,

That should be it. Is it not working?

Best regards,
Jordan Shannon