Add slider bar to tables at small screen sizes

Hueman Child Theme

I am trying to make a table get slide bars when the screen size decreases.

I tried the following in the child’s styles.css:

/*
Theme Name: Hueman Child
Theme URI: https://alxmedia.se/themes/hueman/
Description: Sample child theme for customization.
Author: You
Author URI:
Template: hueman
Version: 1.0.0
*/

@import url(“../hueman/style.css”);

/* ————————————————————————- *
* Theme customization starts here
/* ————————————————————————- */

/* Global */
.mystyle {}

/* Tablet – 800px, 768px & 720px */
@media only screen and (min-width: 720px) and (max-width: 800px) {
.table-slider {
overflow-x: auto; }
}

/* Mobile – 480px & 320px */
@media only screen and (max-width: 719px) {
.table-slider {
overflow-x: auto; }
}

/* Mobile – 320px */
@media only screen and (max-width: 479px) {
.table-slider {
overflow-x: auto; }
}

body { color: #000; }
.entry.excerpt { color: #000; }

.table-slider {
overflow-x: visible;
}

However, this didn’t work. The site is skortaholics.com.

I guess the first point is whether I have edited this file correctly. Do you replace the .mystyle{} entries with the css that you want applied depending on each media query, or do you put the added css between the {} of the .mystyle{}?

Do you have any suggestions for making a table slide when the screen size is decreased? I would like to keep the table as is (no slider) at larger screen sizes.

Thank you!