Mobile css issue on front-end

[vks_group]

Hey, I’m having a strange issue on my site. One of my site’s page is not loading the Mobile css for a table section of my page.
I’ve cleared the cache and checked in incognito mode too. But that didn’t help.
I’ve checked by placing the css in global css tab too but that too didn’t help.

this below table is not showing mobile css whereas in editor it is visible correctly

Please let me know what can I do to solve this. Please its little urgent help me with it. Adding admin credentials and page in secure note for your reference.

[ruenel]

Hello Ketan,

You are experiencing the issue because you have this custom CSS in your site (Appearance > Customize > Additional CSS):

/* 	high altitude solution page table css by mayank  */
	
	/* Product spec table CSS */
.fc-box {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
}
.fc-centered-heading {
  font-size: 28px !important;
  font-weight: 800 !important;
  margin: 1em !important;
}

.custom-table-fc-css {
  border: 1px solid #ccc !important;
  border-collapse: collapse !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  font-family: trade-gothic-next, sans-serif !important;
  table-layout: fixed !important;
}
.custom-table-fc-css caption {
  font-size: 1.5em !important;
  margin: .5em 0 .75em !important;
}
tr.headingrow {
  background-color: #0973ba !important;
  color: white !important;
  font-weight: 400 !important;
  font-family: trade-gothic-next, sans-serif !important;
}

.custom-table-fc-css tr {
  border: 1px solid #ddd !important;
  padding: .35em !important;
}

.custom-table-fc-css th,
.custom-table-fc-css td {
  padding: .625em !important;
  text-align: center !important;
}

.custom-table-fc-css th {
  font-size: 1rem !important;
  text-transform: uppercase !important;
}

@media screen and (max-width: 600px) {
  .custom-table-fc-css {
    border: 0 !important;
  }

  .custom-table-fc-css caption {
    font-size: 1.3em !important;
  }

  .custom-table-fc-css thead {
    border: none !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
  }

  .custom-table-fc-css tr {
    border-bottom: 3px solid #ddd !important;
    display: block !important;
    margin-bottom: .625em !important;
  }

  .custom-table-fc-css td {
    border-bottom: 1px solid #ddd !important;
    display: block !important;
    font-size: .8em !important;
    text-align: right !important;
  }

  .custom-table-fc-css td::before {
    content: attr(data-label) !important;
    float: left !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
  }

  .custom-table-fc-css td:last-child {
    border-bottom: 0 !important;
  }
}

.custom-table-fc-css {
  border-collapse: collapse !important;
  width: 100% !important;
}

.custom-table-fc-css th, 
.custom-table-fc-css td {
  border: 1px solid #CCC !important;
  padding: 8px !important;
  vertical-align: middle !important;
  font-family: trade-gothic-next, sans-serif !important;
}

Be advised that custom CSS coding is beyond the scope of our support under our Support Policy. If you are unfamiliar with code and resolving potential conflicts, you may select our One service for further assistance.

If your developer have added these codes, it is best that you contact them and have them modify the table styling.

Best Regards.