Max,
While that does help, it unfortunately does not work for the template I am using. See below screenshots, the menu is in the middle of the two comparisons rather than to the left as in the desktop view. Can you provide code that will work fully?
Hi @Rob_Case 
This code should work for your case:
.eapps-pricing-table-inner {
overflow: auto;
padding: 40px;
}
.eapps-pricing-table-columns-container {
flex-direction: row !important;
min-width: 800px;
align-items: unset;
}
.global-styles,
.eapps-pricing-table-one-column.eapps-pricing-table-layout-table .eapps-pricing-table-column-head {
display: flex;
}
.eapps-pricing-table-column-head-mobile-inner {
display: none !important;
box-sizing: content-box;
}
.eapps-pricing-table-layout-table .eapps-pricing-table-column.eapps-pricing-table-column-border-radius-16:first-child .eapps-pricing-table-column-item:first-child {
border-radius: 16px 0 0 0 !important;
}
.eapps-pricing-table-column-picture-container {
min-height: 180px;
}
Check it out and let me know how it worked 
Now it is cutting off the left side and only showing the last letters of the rows. It scrolls right fine.
1 Like
Could you please send me a link to the page where your widget is installed?
I don’t have it installed yet, I was seeing that on the Elfsight mobile preview screen, does it need to be installed? I figured it if didnt’ work on the elfsight preview it wasnt going to work on our site
1 Like
Indeed, if you checked the mobile version in the configurator, Head Column will be cropped. However, when checking it on the live page or via Share Link, it should be displayed fine.
Could you please double-check it using the Share Link option?
Seems to be working in the link. The padding on the left side is a little large, what value would reduce that?
1 Like
Please let me consult with the devs. Currently, they are out of the office, so I’ll get back to you tomorrow
Thank you for waiting!
We’ve also noticed that the features in the Head Column weren’t aligned and added this code to fix this issue and adjust padding on the left:
.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-inner {
padding-left: 0 !important;
}
.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-column {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-column-featured {
margin-top: -20px !important;
margin-bottom: -20px !important;
}
padding-left value in the 3rd line of the code adjusts it to your liking.
Check it out and let me know if it helped 
That code made it go back to stacking it - not scroll -
1 Like
This code should be combined with the previous solution. I’ve added the full version to the widget again:
.eapps-pricing-table-inner {
overflow: auto;
padding: 40px;
}
.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-inner {
padding-left: 0 !important;
}
.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-column {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-column-featured {
margin-top: -20px !important;
margin-bottom: -20px !important;
}
.eapps-pricing-table-columns-container {
flex-direction: row !important;
min-width: 800px;
align-items: unset;
}
.global-styles,
.eapps-pricing-table-one-column.eapps-pricing-table-layout-table .eapps-pricing-table-column-head {
display: flex;
}
.eapps-pricing-table-column-head-mobile-inner {
display: none !important;
box-sizing: content-box;
}
.eapps-pricing-table-layout-table .eapps-pricing-table-column.eapps-pricing-table-column-border-radius-16:first-child .eapps-pricing-table-column-item:first-child {
border-radius: 16px 0 0 0 !important;
}
.eapps-pricing-table-column-picture-container {
min-height: 180px;
}
.eapps-pricing-table-column-price-container {
height: 56px;
}
Please check your widget and let me know if you like the result
That worked. Thank you
1 Like
No sweat
I followed this post and added the custom code that was recommended from the developers. Thanks for doing that for last person. That was really nice of you. However, it needs some tweaking for my application and curious if you can help with that.
The website page I am working on is: Enclosed Sled Trailers - Big Bubba's Trailers Alaska
*NOTE: You’ll need to scroll down to see the table
My issue is that the head column names are no longer matched up with their specific features. I have attached a screenshot taken on my cell phone.
If I can get that lined back up, this feature/code would do my website wonders.
Thank you in advance!
UPDATE: 1 hour after initial post
After messing with the code myself, I found that if I added a Head Column Title, this helped out with filling the dead space at the top. It appears to be working properly on Firefox and Edge; however, on Chrome browsers, it is still not aligning properly.
UPDATE: 4 hours after initial post
After messing with the code some more from multiple tables, I am realizing the left-to-right alignment can very based on the content in the table. Some tables load all the way to the left of the screen. Others load with spacing before the table starts. After doing some research, it appears I need to add justify-content: start; for the table to be horizontally aligned and start at the far left had side of the screen. I’m just not sure where to put this code.
I appreciate the help.
1 Like
Hi @Chase_Jones and welcome to the Community
A huge thank you for such a detailed description of the issue - that’s much appreciated!
Your request is with our devs now. I’ll report back once the solution is ready
Hi there, @Chase_Jones
We’ve made some adjustments to your Pricing Table widgets and everything seems to be working fine now.
Here is the full CSS code in your 1st Pricing Table:
.eapps-pricing-table-inner {
overflow: auto;
padding: 0px;
}
.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-inner {
padding-left: 50% !important;
}
.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-column {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-column-featured {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.eapps-pricing-table-columns-container {
flex-direction: row !important;
min-width: 800px;
align-items: flex-start;
}
.global-styles,
.eapps-pricing-table-one-column.eapps-pricing-table-layout-table .eapps-pricing-table-column-head {
display: inherit;
}
.eapps-pricing-table-column-head-mobile-inner {
display: none !important;
box-sizing: content-box;
}
.eapps-pricing-table-layout-table .eapps-pricing-table-column.eapps-pricing-table-column-border-radius-16:first-child .eapps-pricing-table-column-item:first-child {
border-radius: 16px 0 0 0 !important;
}
.eapps-pricing-table-column-picture-container {
min-height: 180px;
}
.eapps-pricing-table-column-price-container {
height: 56px;
}
.eapps-pricing-table-column .eapps-pricing-table-column-features-container {
margin: 0;
padding: 16px 0;
}
@media (width <= 480px) {
.eapps-pricing-table-column-1 .eapps-pricing-table-column-features-container {
padding-top: 22px!important;
padding-bottom: 36px!important;
}
.eapps-pricing-table-column-price-caption {
display: none!important;
}
.eapps-pricing-table-column-price-container {
height: auto!important;
}
.eapps-pricing-table-column-features-item-inner {
padding: 8px 16px!important;
}
}
And this is the code added to your 2nd widget:
.eapps-pricing-table-inner {
overflow: auto;
padding: 0px;
}
.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-inner {
padding-left: 50% !important;
}
.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-column {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.global-styles,
.eapps-pricing-table-one-column .eapps-pricing-table-column-featured {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
.eapps-pricing-table-columns-container {
flex-direction: row !important;
min-width: 800px;
align-items: flex-start;
}
.global-styles,
.eapps-pricing-table-one-column.eapps-pricing-table-layout-table .eapps-pricing-table-column-head {
display: inherit;
}
.eapps-pricing-table-column-head-mobile-inner {
display: none !important;
box-sizing: content-box;
}
.eapps-pricing-table-layout-table .eapps-pricing-table-column.eapps-pricing-table-column-border-radius-16:first-child .eapps-pricing-table-column-item:first-child {
border-radius: 16px 0 0 0 !important;
}
.eapps-pricing-table-column-picture-container {
min-height: 180px;
}
.eapps-pricing-table-column-price-container {
height: 56px;
}
.eapps-pricing-table-column .eapps-pricing-table-column-features-container {
margin: 0;
padding: 16px 0;
}
@media (width <= 480px) {
.eapps-pricing-table-column-1 .eapps-pricing-table-column-features-container {
padding-top: 52px!important;
padding-bottom: 36px!important;
}
.eapps-pricing-table-column-price-caption {
display: none!important;
}
.eapps-pricing-table-column-price-container {
height: auto!important;
}
.eapps-pricing-table-column-features-item-inner {
padding: 8px 16px!important;
}
}
Check it out and let me know if it’s fine now
Can you help me get these deployed again?
1 Like
Hi there, @Rob_Case
Could you please specify what exactly you’d like to be changed?
I tried pasting this code into my site and it just pasted as text in a code imbed
The codes I’ve shared above should be added to the Custom CSS field on the Appearance tab of your widget’s settings.
Could you please send me a link to the page where your widget is installed and specify which code you were trying to use?