Docs

[Todd C]

Hey X,

Is there a way to make the mobile version of a pricing table not shift where columns of the table stacked on top of each other? For example, I like how it is displayed on the desktop version of the site, but when sizing down the columns stack on top of each other but I want them to remain side-by-side on mobile.

I will utilize the visibility element so that the desktop version has more detail, and the mobile version less detail, but I want the table columns to rremain side by side on mobile.

here is the link… http://www.inkfinityprinting.com/

I will reply with a private thread for login credentials.

Also, I want to make the recent blog posts (bottom of home page) color overlay more transparent. Right now, you can barely see the title because of the overlay. OR, is there a way to make the title that appears on mouse-over on top of the overlay? I’ve tried a couple things in the CSS Customizer but no luck so far.

Thanks in advance for your help!

[Todd C]

This reply has been marked as private.

[Nabeel A]

Hi there,

Please add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

.x-pricing-table.three-columns .x-pricing-column {
    width: 33.33333% !important;
    float: left !important;
}
.x-pricing-table.two-columns .x-pricing-column {
    width: 50% !important;
    float: left !important;
}

For the transparency you can use this code:

.flex-direction-nav a, .flex-control-nav a:hover, .flex-control-nav a.flex-active, .x-dropcap, .x-skill-bar .bar, .x-pricing-column.featured h2, .h-comments-title small, .x-pagination a:hover, .x-entry-share .x-share:hover, .entry-thumb, .widget_tag_cloud .tagcloud a:hover, .widget_product_tag_cloud .tagcloud a:hover, .x-highlight, .x-recent-posts .x-recent-posts-img:after, .x-portfolio-filters {
    background-color: rgba(236, 0, 139, 0.22) !important;
}

Hope this helps!

[Todd C]

When adding the code for the blog posts transparency, the accent color on pricing table changed with it. Can that be separated to keep the pricing table accent color full opacity and/or a different color altogether?

The only other thing that I would like to change is for the recent blog posts. Is it possible to have the title text appear in front of the color overlay? Right now, it appears below the color overlay so depending on the image, it can be hard to read the title text on mouse-over. If the text could appear on top of the overlay then the overlay would work in favor of making the title text more visible.

Thank you for the previous code, it worked, just had a couple unintended consequences!

[Rad]

Hi there,

Please change that second CSS to this,

.entry-thumb, .x-recent-posts .x-recent-posts-img:after {
    background-color: rgba(236, 0, 139, 0.22) !important;
z-index: 0;
}

Hope it helps.

[Todd C]

That worked, thank you! Is there a way to keep the color in the pricing table from changing with the recent posts color? When adding code to change the recent posts opacity, it affects the accent color in the pricing tables by making it more transparent as well. I want the accent in the pricing tables to stay the same and be more vibrant. Thank you!

[Todd C]

Actually, I must have overlooked something. Everything is working as hoped and expected. Thank you very much!

[Nabeel A]

Glad we could help.

Cheers!

[Author]

Posts