What is a promise in Javascript?

Question

Mari Cruz

Asked: 2022-01-06 11:14:02 +0800 CST 2022-01-06 11:14:02 +0800 CST 2022-01-06 11:14:02 +0800 CST

How to fix "Content wider than screen" problem?

772

I'm trying to fix the mobile usability issues of a website and I can't find a solution for more resources than I've searched. I have tried the solutions offered in other queries on this site, but none have worked.

In HTML, how can I fit the content to the width of the screen?

Correct screen width

The problem is in a table, it is the one that extends across, spoiling everything. I don't know what else I can do, I hope that with the code that I show you, you can give me some idea.

Thank you very much

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body class="homepage">
<section id="portfolio">
    <div class="container">
    <div class="container-politica">
      <h2>1. Política de privacidad</h2>
      <p>Este sitio web informa a los usuarios del sitio web sobre su política respecto del tratamiento ye servicios a través de su sitio web.</p
   <p>El uso de esta web implica la aceptación de esta política de privacidad</p>

      <h2>¿Qué son las cookies propias y las de terceros?</h2>
      <p>Las cookies propias son las generadas por la página que está visitando y las de terceros son las generadas por
        servicios
        o proveedores externos como Mailchimp, Mailrelay, Facebook, Twitter, Google, etc.</p>
      <h2>¿Se pueden eliminar las cookies?</h2>
      <p>Sí. No sólo eliminar, también bloquear, de forma general o particular para un dominio específico. Para eliminar
        las
        cookies de un sitio web debe ir a la configuración de su navegador y allí podrá buscar las asociadas al dominio
        en
        cuestión y proceder a su eliminación.</p>


      <h2>Cookies de redes sociales</h2>
      <p>Las Cookies de redes sociales pueden almacenarse en su navegador mientras navega por haciaelautoempleo.com por
        ejemplo,
        cuando utiliza el botón de compartir contenidos de haciaelautoempleo.com en alguna red social.</p>
      <p>Las empresas que generan estas cookies correspondientes a las redes sociales que utiliza esta web tienen sus
        propias
        políticas de cookies:</p>
      <ul>
        <li>Cookie de Twitter, según lo dispuesto en su
          <a target="_blank" href="https://twitter.com/privacy">Política de privacidad y uso de cookies.</a>
        </li>
        <li>Cookie de Google+ y Google Maps, según lo dispuesto en su página sobre qué
          <a target="_blank" href="http://www.google.com/intl/es/policies/technologies/types/">tipo de cookies
            utilizan</a>.</li>
      </ul>
      <p>&nbsp;</p>
      <p>En cumplimiento de lo establecido en el artículo 22.2 de la LSSI se detallan las cookies que pueden instalarse
        habitualmente
        durante la navegación por este sitio web:</p>

      <table class="egt">
        <caption>Cookies que utiliza esta web.</caption>

        <tr>
          <th scope="col">DOMINIO</th>
          <th>NOMBRE DE LA COOKIE</th>
          <th>DURACION</th>
          <th>CONTENIDO</th>
          <th>DESCRIPCION</th>
        </tr>
        <tr>
          <th>web</th>
          <td>PHPSESSID</td>
          <td>Al finalizar la sesión de navegación.</td>
          <td></td>
          <td> Esta cookie es usada por el lenguaje de encriptado PHP para permitir que las variables de SESIÓN sean
            guardadas
            en el servidor web. Esta cookies es esencial para el funcionamiento de la web</td>
        </tr>

        <tr>
          <th>web.com </th>
          <td>_ga</td>
          <td>Caducada.</td>
          <td></td>
          <td>Se utiliza para cualquier tipo de conexión.</td>
        </tr>

        <tr>
          <th>web.com </th>
          <td>cookies_surestao</td>
          <td>viernes, 4 de mayo de 2018, 22:07:35</td>
          <td></td>
          <td>Se utiliza para cualquier tipo de conexión.</td>
        </tr>
        <tr>
          <th>.static.addtoany.com </th>
          <td>__utmz</td>
          <td>sábado, 1 de septiembre de 2018, 6:19:04</td>
          <td>s|utmccn=(referral)|utmcmd=referral|utmcct=/</td>
          <td>Se utiliza estadisticas de redes sociales.</td>
        </tr>
        <tr>
          <th>.static.addtoany.com </th>
          <td>__utma</td>
          <td>domingo, 1 de marzo de 2020, 17:19:04</td>
          <td>5444.1517675303.1519902741.1520007545.13</td>
          <td>Se utiliza para comprobar las sesiones</td>
        </tr>
       
      </table>
      <h2>Más información sobre las cookies</h2>
      <p>Puedes consultar el reglamento sobre cookies publicado por la Agencia Española de Protección de Datos en su “
        <a target="_blank"
          href="https://www.agpd.es/portalwebAGPD/canaldocumentacion/publicaciones/common/Guias/Guia_Cookies.pdf">Guía
          sobre el uso de las cookies</a>” y obtener más información sobre las cookies en Internet,
        <a href="#"></a>
      </p>
      <p>Si desea tener un mayor control sobre la instalación de cookies, puede instalar programas o complementos a su
        navegador,
        conocidos como herramientas de “Do Not Track”, que le permitirán escoger aquellas cookies que desea permitir.
      </p>
      <h2>Advertencia importante sobre las cookies</h2>
    </div>
    </div>
  </section>

</body>
</html>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,300,800);


/*************************
*******Typography******
**************************/

.navbar1 {
  background-color: transparent !important;
  -webkit-transition: all .5s;
  transition: all .5s;
}

.navbar1.alt-color {
  background-color: rgb(19, 143, 214) !important;
} 

body {
  background: #fff;
  font-family:'Open Sans', Arial, sans-serif;
  color:#333;
  line-height:1.6em;
}

.container-politica {
  font-size: 1.6em;
}

.container-politica h2 {
  font-size: 36px;
}

.container-politica p {
  line-height: 200%;
}

.container-politica ul {
  line-height: 200%;
}

/*.container-politica tr { 
  max-width: 100%;
  height: auto;
}

.container-politica.egt {
  display: flex;
  justify-content: space-between;
}

table{
  padding-right: 1em;
  width: 100%;
  }*/


h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight:500; 
    font-family:'Open Sans', Arial, sans-serif;
    color:#333;
}

h1{
  font-size: 36px;
  color:#fff;
}

h2{
  font-size: 20px;
}

h3{
  font-size: 16px;
  color: #787878;
  font-weight: 400;
  line-height: 24px;
}

h4{
  font-size: 16px;
}

a {
  color: #E8CE0E;
  -webkit-transition: color 300ms, background-color 300ms;
  -moz-transition: color 300ms, background-color 300ms;
  -o-transition:  color 300ms, background-color 300ms;
  transition:  color 300ms, background-color 300ms;
}

a:hover, a:focus {
  color: #d43133;
}

hr {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #fff;
}


.btn-primary {
  padding: 8px 20px;
  background: #E8CE0E;
  color: #fff;
  border-radius: 4px;
  border:none;
  margin-top: 10px;
}


.btn-primary:hover, 
.btn-primary:focus{
  background: #E8CE0E;
  outline: none;
  box-shadow: none;
} 

.btn-transparent {
  border: 3px solid #fff;
  background: transparent;
  color: #fff;
}

.btn-transparent:hover {
  border-color: rgba(255, 255, 255, 0.5);
}

a:hover,
a:focus {
  color: #000;
  text-decoration: none;
  outline: none;
}

.dropdown-menu {
  margin-top: -1px;
  min-width: 180px;
}

.center h2{
  font-size: 36px;
  margin-top: 0;
  margin-bottom: 20px;
}

.media>.pull-left{
  margin-right: 20px;
}

.media>.pull-right{
  margin-left: 20px;
}

body > section {
  padding: 70px 0;
}

.center {
  text-align: center;
  padding-bottom: 55px;
}

.scaleIn {
  -webkit-animation-name: scaleIn;
  animation-name: scaleIn;
}

.lead{
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
}

.transparent-bg {
  background-color: transparent !important;
  margin-bottom: 0;
}

@-webkit-keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}


/*************************
*******Header******
**************************/
.navbar-fixed-top .navbar-toggle .icon-bar {
  background-color: #fff;
}

.navbar>.container .navbar-brand{
  margin-left: 0;
}

.top-bar {
  padding: 10px 0;
  background: #1163dd;
  border-bottom: 1px solid #222;
  line-height: 28px;
}

.social{
  text-align: center;
}

.social-share{
 display: inline-block;
 list-style: none;
 padding: 0;
 margin: 0;
}

ul.social-share li {
  display: inline-block;
}

ul.social-share li a {
  display: inline-block;
  color: #fff;
  background: #404040;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  border-radius: 2px;
}

ul.social-share li a:hover {
  background: #E8CE0E;
  color: #fff;
}

.navbar-brand {
  padding: 0;
  margin:0;
  color:#E8CE0E;
}
.navbar-header a.navbar-brand {
  color:#E8CE0E;
}

.navbar {
  border-radius: 0;
  margin-bottom: 0;
  background: #1475cf;
  padding: 15px 0;
  padding-bottom: 0;
}

 .navbar-nav{
  margin-top: 12px;
 }

.navbar-nav>li{
  margin-left: 25px;
  padding-bottom: 28px;
}

.navbar-fixed-top .navbar-nav > li > a {
  padding: 5px 15px;
  margin: 0;
  border-radius: 3px;
  color: #fff;
  line-height: 24px;
  display: inline-block;
}

.navbar-fixed-top .navbar-nav > li > a:hover{
    background-color: #E8CE0E;
  color: #333;
}

.navbar-fixed-top {
  border: none;
}

.navbar-fixed-top .navbar-brand {
  font-size: 36px;
  line-height: 50px;
  color: #fff;
}

.navbar-fixed-top .navbar-nav > .active > a,
.navbar-fixed-top .navbar-nav > .active > a:hover,
.navbar-fixed-top .navbar-nav > .active > a:focus,
.navbar-fixed-top .navbar-nav > .open > a,
.navbar-fixed-top .navbar-nav > .open > a:hover,
.navbar-fixed-top .navbar-nav > .open > a:focus {
  background-color: #E8CE0E;
  color: #333;
}

.navbar-fixed-top .navbar-nav .dropdown-menu {
  background-color: rgba(0,0,0,.85);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.125);
  border: 0;
  padding: 0;
  margin-top: 0;
  border-top: 0;
  border-radius: 0;
  left: 0;
}

.navbar-fixed-top .navbar-nav .dropdown-menu:before{
  position: absolute;
  top:0;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li > a {
  padding: 8px 15px;
  color: #fff;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li:hover > a,
.navbar-fixed-top .navbar-nav .dropdown-menu > li:focus > a,
.navbar-fixed-top .navbar-nav .dropdown-menu > li.active > a {
  background-color: #E8CE0E;
  color: #fff;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li:last-child > a {
  border-radius: 0 0 3px 3px;
}

.navbar-fixed-top .navbar-nav .dropdown-menu > li.divider {
  background-color: transparent;
}

.navbar-fixed-top .navbar-collapse,
.navbar-fixed-top .navbar-form {
  border-top: 0;
  padding-bottom: 0;
}


/*************************
*******Home Page******
**************************/


.slider {
  position: relative;
  margin-top:130px;
}

#carousel-slider {
  position: relative;
}

#carousel-slider .carousel-indicators {
  bottom: -25px;
}

#carousel-slider .carousel-indicators li {
  border: 1px solid #ffbd20;
}

#carousel-slider a i {
  border: 1px solid #777;
  border-radius:50%;
  font-size: 28px;
  height: 50px;
  padding: 8px;
  position: absolute;
  top: 50%;
  width: 50px;
  color:#777;
}

#carousel-slider a i:hover {
  background:#E8CE0E;
  color:#fff;
  border: 1px solid #E8CE0E;
}

#carousel-slider 
.carousel-control {
  width:inherit;
}

#carousel-slider .carousel-control.left i {
  left:-25px
}

#carousel-slider .carousel-control.right i {
  right: -25px;
}

#carousel-slider
.carousel-control.left, 
#carousel-slider
.carousel-control.right {
  background: none;
}



#feature {
  background: #f2f2f2;
  padding-bottom: 40px;
}
#feature.transparent-bg {
  margin-top:-40px;
  
}
.features{
  padding: 0;
}

.feature-wrap {
  margin-bottom: 35px;
  overflow: hidden;
}

.feature-wrap h2{
  margin-top: 10px;
}

.feature-wrap .pull-left {
  margin-right: 25px;
}

.feature-wrap i{
  font-size: 48px;
  height: 110px;
  width: 110px;
  margin: 3px;
  border-radius: 100%;
  line-height: 110px;
  text-align:center;
  background: #ffffff;
  color: #E8CE0E;
  border: 3px solid #ffffff;
  box-shadow: inset 0 0 0 5px #f2f2f2;
  -webkit-box-shadow: inset 0 0 0 5px #f2f2f2;
  -webkit-transition: 500ms;
  -moz-transition: 500ms;
  -o-transition: 500ms;
  transition: 500ms;
  float: left;
  margin-right: 25px;
}

.feature-wrap i:hover {
  background: #E8CE0E;
  color: #fff;
  box-shadow: inset 0 0 0 5px #E8CE0E;
  -webkit-box-shadow: inset 0 0 0 5px #E8CE0E;
  border: 3px solid #E8CE0E;
}

#recent-works .col-xs-12.col-sm-4.col-md-3{
  padding: 0;
}
/*
#recent-works{
    padding-bottom: ;
}
*/
.recent-work-wrap {
  position: relative;
}

.recent-work-wrap img{
  width: 100%;
}

.recent-work-wrap .recent-work-inner{
  top: 0;
  background: transparent;
  opacity: .8;
  width: 100%;
  border-radius: 0;
  margin-bottom: 0;
}

.recent-work-wrap .recent-work-inner h3{
  margin: 10px 0;
}

.recent-work-wrap .recent-work-inner h3 a{
  font-size: 24px;
  color: #fff;
}

.recent-work-wrap .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border-radius: 0;
  background: #333;
  color: #fff;
  vertical-align: middle;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;  
  padding: 30px;
}

.recent-work-wrap .overlay .preview {
  bottom: 0;
  display: inline-block;
  height: 35px;
  line-height: 35px;
  border-radius: 0;
  background: transparent;
  text-align: center;
  color: #fff;
}

.recent-work-wrap:hover .overlay {
  opacity: 1;
}

#services {
  background: #000 url(../images/services/bg_services.jpg);
  background-size: cover;
  margin-top:70px;
}

#services .lead,
#services h2{
  color: #fff;
}

.services-wrap {
  padding: 40px 30px;
  background: #fff;
  border-radius: 4px;
  margin: 0 0 40px;
}

.services-wrap h3 {
  font-size: 20px;
  margin: 10px 0;
}

.services-wrap .pull-left {
  margin-right: 20px;
}

#middle {
  background: #fff;
  margin-top:-90px;
}

.skill h2{
  margin-bottom: 25px;
}

.progress-wrap{
  position: relative;
}

.progress .color1,
.progress .color1 .bar-width{
  background: #2d7da4;
}

.progress .color2,
.progress .color2 .bar-width{
  background: #6aa42f;
}

.progress .color3,
.progress .color3 .bar-width{
  background: #ffcc33;
}

.progress .color4,
.progress .color4 .bar-width{
  background: #db3615;
}

.progress, 
.progress-bar {
  height: 15px;
  line-height: 15px;
  background: #e6e6e6;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
  text-align: right;
}

.progress{
  position: relative;
}

.progress .bar-width{
  position: absolute;
  width: 40px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  top: -30px;
  border-radius: 2px;
  margin-left: -30px;
}

.progress span{
  position: relative;
}

.progress span:before{
  content: " ";
  position: absolute;
  width: auto;
  height: auto;
  border-width: 8px 5px;
  border-style: solid;
  bottom: -15px;
  right: 8px;
}

.progress .color1 span:before{
  border-color: #2d7da4 transparent transparent transparent;
}

.progress .color2 span:before{
  border-color: #6aa42f transparent transparent transparent;
}

.progress .color3 span:before{
  border-color: #ffcc33 transparent transparent transparent;
}

.progress .color4 span:before{
  border-color: #db3615 transparent transparent transparent;
}

.accordion h2{
  margin-bottom: 25px;
}

.panel-default{
  border-color: transparent;
}

.panel-default>.panel-heading,
.panel{
  background-color: #e6e6e6; 
  border:0 none;
  box-shadow:none;
}

.panel-default>.panel-heading+.panel-collapse .panel-body{
  background: #fff;
  color: #858586;
}

.panel-body{
  padding: 20px 20px 10px;
}

.panel-group .panel+.panel{
  margin-top: 0;
  border-top: 1px solid #d9d9d9;
}

.panel-group .panel{
  border-radius: 0;
}

.panel-heading{
  border-radius: 0;
}

.panel-title>a{
  color: #4e4e4e;
}

.accordion-inner img{
  border-radius: 4px;
}

.accordion-inner h4{
  margin-top: 0;
}

.panel-heading.active{
  background: #1f1f20;
}

.panel-heading.active .panel-title>a{
  color:#fff;
}

a.accordion-toggle  i{
  width: 45px;
  line-height: 44px;
  font-size: 20px;
  margin-top: -10px;
  text-align: center;
  margin-right: -15px;
  background: #c9c9c9;
}

.panel-heading.active a.accordion-toggle i{
  background: #E8CE0E;
  color: #fff;
}

.panel-heading.active a.accordion-toggle.collapsed i{
  background: #E8CE0E;
  color: #fff;
}

.nav-tabs>li{
  margin-bottom: 0px;
  border-bottom: 1px solid #e6e6e6;
}

.nav-tabs{
  border-bottom: transparent;
  border-right: 1px solid #e6e6e6;
}

.nav-tabs>li>a {
  background: #f5f5f5;
  color: #666;
  border-radius: 0;
  border: 0 none;
  line-height: 24px;
  margin-right:0;
  padding: 13px 15px;
}

.nav-tabs li:last-child{
  border-bottom: 0 none;
} 

.nav-stacked>li+li{
  margin-top: 0;
}

.nav-tabs>li>a:hover{
  background: #1f1f20;
  color:#fff;
}

.nav-tabs>li.active>a, 
.nav-tabs>li.active>a:hover, 
.nav-tabs>li.active>a:focus {
  border: 0;
  color:#fff;
  background: #1f1f20;
  position: relative;
}

.nav-tabs>li.active>a:after {
  position: absolute;
  content:  "";
  width: auto;
  height: auto;
  border-style:solid;
  border-color: transparent transparent transparent #1f1f20;
  border-width: 25px 22px;
  right: -44px;
  top:0;
}

.tab-wrap{
  border:1px solid #e6e6e6;
  margin-bottom: 20px;
}

.tab-content{
  padding: 20px;
}

.tab-content h2{
  margin-top: 0;
}

.tab-content img{
  border-radius: 4px;
}

.testimonial h2{
  margin-top: 0;
}

.testimonial-inner {
  color:#858586;
  font-size: 14px;
}

.testimonial-inner .pull-left{
  border-right: 1px solid #e7e7e7;
  padding-right: 15px;
  position: relative;
}

.testimonial-inner .pull-left:after{
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  top: 50%;
  margin-top: -5px;
  background: #FFF;
  -webkit-transform: rotate(45deg);
  border: 1px solid #e7e7e7;
  right: -5px;
  border-left: 0 none;
  border-bottom: 0 none;
}

#partner {
  background: url(../images/partners/partner_bg.png) 50% 50% no-repeat;
  background-size: cover;
}

#partner {
  color: #fff;
  text-align: center;
}

#partner h2, 
#partner h3 {
  color: #fff;
}

.partners ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.partners ul li{
  display: inline-block;
  float: left;
  width: 20%;
}

#conatcat-info{
  background: #fff url(../images/contact.png) no-repeat 90% 0;
  padding: 30px 0;
}

.contact-info i{
  width: 60px;
  height: 60px;
  font-size: 40px;
  line-height: 60px;
  color: #fff;
  background: #000;
  text-align: center;
  border-radius: 10px;
}

.contact-info h2{
  margin-top: 0;
  color: #000;
}

.contact-info{
  color:#000;
}


.validation {
    color: red;
    display:none;
    margin: 0 0 20px;
    font-weight:400;
    font-size:13px;
}

#sendmessage {
    color: green;
    border:1px solid green;
    display:none;
    text-align:center;
    padding:15px;
    font-weight:600;
    margin-bottom:15px;
}

#errormessage {
    color: red;
    display:none;
    border:1px solid red;
    text-align:center;
    padding:15px;
    font-weight:600;
    margin-bottom:15px;
}

#sendmessage.show, #errormessage.show, .show {
    display:block;
}

.services {
  padding: 0;
}

.get-started {
  background: none repeat scroll 0 0 #F3F3F3;
  border-radius: 3px;
  padding-bottom: 30px;
  position: relative;
  margin-bottom: 18px;
  margin-top: 60px;
}

.get-started h2 {
  padding-top: 30px;
  margin-bottom: 20px;
}

.request {
  bottom: -15px;
  left: 50%;
  position: absolute;
  margin-left: -110px;
}

.request h4 {
  position: absolute;
  width: 220px;
  position:relative;
}

.request h4 a{
  background:#E8CE0E;
  color: #fff;
  font-size: 14px;
  font-weight: normal;
  border-radius: 3px;
  padding: 5px 15px;
}

.clients-area {
  padding: 60px;
}

.clients-comments {
    background-image: url("../images/image_bg.png");
    background-position: center 118px;
    background-repeat: no-repeat;
    margin-bottom: 100px;
}

.clients-comments img {
  background:#DDDDDD;
  border: 1px solid #DDDDDD;
  height: 182px;
  padding: 3px;
  width: 182px;
  transition: all 0.9s ease 0s;
  -moz-transition: all 0.9s ease 0s;
  -webkit-transition: all 0.9s ease 0s;
  -o-transition: all 0.9s ease 0s;
}

.clients-comments h3 {
  margin-top: 55px;
  font-weight: 300;
  padding: 0 40px;
}

.clients-comments h4 {
  font-weight: 300;
  margin-top: 15px;
}


.clients-comments  h4  span {
  font-weight: 700;
  font-style: oblique;
}

/*************************
********* Portfolio CSS ******
**************************/
#portfolio {
  margin-top: 70px;
}

#portfolio_page {
  margin-top: 115px;
  padding-bottom: 0;
}

.portfolio-items, 
.portfolio-filter {
  list-style: none outside none;
  margin: 0 0 40px 0;
  padding: 0;
}

.portfolio-filter > li {
  display: inline-block;
}

.portfolio-filter > li a {
  background: none repeat scroll 0 0 #FFFFFF;
  font-size: 14px;
  font-weight: 400;
  margin-right: 20px;
  text-transform: uppercase;
  transition: all 0.9s ease 0s;
  -moz-transition: all 0.9s ease 0s;
  -webkit-transition: all 0.9s ease 0s;
  -o-transition: all 0.9s ease 0s;
  border: 1px solid #F2F2F2;
  outline: none;
  border-radius: 3px;
}

.portfolio-filter > li a:hover,
.portfolio-filter > li a.active{
  color:#fff;
  background: #E8CE0E;
  border: 1px solid #E8CE0E;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.portfolio-items > li {
  float: left;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.portfolio-item {
  margin: 0;
  padding:0;
}

/* Start: Recommended Isotope styles */
/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}

/* End: Recommended Isotope styles */
/* disable CSS transitions for containers with infinite scrolling*/
.isotope.infinite-scrolling {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}

2 Answers

Voted

Marcos · Answer 1 · 2022-01-06T11:58:31+08:00

If the idea is that there is no horizontal scrolling at the document level, then you could:

Put it <table>inside a<div>
Al <div> agregarle overflow:auto para tener una barra de scroll horizontal a nivel de la tabla
Opcionalmente al <div> podes agregarle height: 90vh para agregar scroll vertical y así tener ambas barras de scroll visible en la pantalla.

Ejemplo:

.table-container {
  overflow: auto;
  height: 90vh;
}

<section id="portfolio">
  <div class="container">
    <div class="container-politica">
      <h2>1. Política de privacidad</h2>
      <p>Este sitio web informa a los usuarios del sitio web sobre su política respecto del tratamiento ye servicios a través de su sitio web.</p <p>El uso de esta web implica la aceptación de esta política de privacidad</p>

      <h2>¿Qué son las cookies propias y las de terceros?</h2>
      <p>Las cookies propias son las generadas por la página que está visitando y las de terceros son las generadas por servicios o proveedores externos como Mailchimp, Mailrelay, Facebook, Twitter, Google, etc.</p>
      <h2>¿Se pueden eliminar las cookies?</h2>
      <p>Sí. No sólo eliminar, también bloquear, de forma general o particular para un dominio específico. Para eliminar las cookies de un sitio web debe ir a la configuración de su navegador y allí podrá buscar las asociadas al dominio en cuestión y proceder
        a su eliminación.</p>


      <h2>Cookies de redes sociales</h2>
      <p>Las Cookies de redes sociales pueden almacenarse en su navegador mientras navega por haciaelautoempleo.com por ejemplo, cuando utiliza el botón de compartir contenidos de haciaelautoempleo.com en alguna red social.</p>
      <p>Las empresas que generan estas cookies correspondientes a las redes sociales que utiliza esta web tienen sus propias políticas de cookies:</p>
      <ul>
        <li>Cookie de Twitter, según lo dispuesto en su
          <a target="_blank" href="https://twitter.com/privacy">Política de privacidad y uso de cookies.</a>
        </li>
        <li>Cookie de Google+ y Google Maps, según lo dispuesto en su página sobre qué
          <a target="_blank" href="http://www.google.com/intl/es/policies/technologies/types/">tipo de cookies
            utilizan</a>.</li>
      </ul>
      <p>&nbsp;</p>
      <p>En cumplimiento de lo establecido en el artículo 22.2 de la LSSI se detallan las cookies que pueden instalarse habitualmente durante la navegación por este sitio web:</p>
      <div class="table-container">
        <table class="egt">
          <caption>Cookies que utiliza esta web.</caption>

          <tr>
            <th scope="col">DOMINIO</th>
            <th>NOMBRE DE LA COOKIE</th>
            <th>DURACION</th>
            <th>CONTENIDO</th>
            <th>DESCRIPCION</th>
          </tr>
          <tr>
            <th>web</th>
            <td>PHPSESSID</td>
            <td>Al finalizar la sesión de navegación.</td>
            <td></td>
            <td> Esta cookie es usada por el lenguaje de encriptado PHP para permitir que las variables de SESIÓN sean guardadas en el servidor web. Esta cookies es esencial para el funcionamiento de la web</td>
          </tr>

          <tr>
            <th>web.com </th>
            <td>_ga</td>
            <td>Caducada.</td>
            <td></td>
            <td>Se utiliza para cualquier tipo de conexión.</td>
          </tr>

          <tr>
            <th>web.com </th>
            <td>cookies_surestao</td>
            <td>viernes, 4 de mayo de 2018, 22:07:35</td>
            <td></td>
            <td>Se utiliza para cualquier tipo de conexión.</td>
          </tr>
          <tr>
            <th>.static.addtoany.com </th>
            <td>__utmz</td>
            <td>sábado, 1 de septiembre de 2018, 6:19:04</td>
            <td>s|utmccn=(referral)|utmcmd=referral|utmcct=/</td>
            <td>Se utiliza estadisticas de redes sociales.</td>
          </tr>
          <tr>
            <th>.static.addtoany.com </th>
            <td>__utma</td>
            <td>domingo, 1 de marzo de 2020, 17:19:04</td>
            <td>5444.1517675303.1519902741.1520007545.13</td>
            <td>Se utiliza para comprobar las sesiones</td>
          </tr>

        </table>
      </div>
      <h2>Más información sobre las cookies</h2>
      <p>Puedes consultar el reglamento sobre cookies publicado por la Agencia Española de Protección de Datos en su “
        <a target="_blank" href="https://www.agpd.es/portalwebAGPD/canaldocumentacion/publicaciones/common/Guias/Guia_Cookies.pdf">Guía
          sobre el uso de las cookies</a>” y obtener más información sobre las cookies en Internet,
        <a href="#"></a>
      </p>
      <p>Si desea tener un mayor control sobre la instalación de cookies, puede instalar programas o complementos a su navegador, conocidos como herramientas de “Do Not Track”, que le permitirán escoger aquellas cookies que desea permitir.
      </p>
      <h2>Advertencia importante sobre las cookies</h2>
    </div>
  </div>
</section>

Otra opción es agregar a la <table> word-break: break-all para forzar que las palabras largas se corte y columnas se puedan encojer automáticamente.

Ejemplo:

table {
word-break: break-all;
}

<section id="portfolio">
  <div class="container">
    <div class="container-politica">
      <h2>1. Política de privacidad</h2>
      <p>Este sitio web informa a los usuarios del sitio web sobre su política respecto del tratamiento ye servicios a través de su sitio web.</p <p>El uso de esta web implica la aceptación de esta política de privacidad</p>

      <h2>¿Qué son las cookies propias y las de terceros?</h2>
      <p>Las cookies propias son las generadas por la página que está visitando y las de terceros son las generadas por servicios o proveedores externos como Mailchimp, Mailrelay, Facebook, Twitter, Google, etc.</p>
      <h2>¿Se pueden eliminar las cookies?</h2>
      <p>Sí. No sólo eliminar, también bloquear, de forma general o particular para un dominio específico. Para eliminar las cookies de un sitio web debe ir a la configuración de su navegador y allí podrá buscar las asociadas al dominio en cuestión y proceder
        a su eliminación.</p>


      <h2>Cookies de redes sociales</h2>
      <p>Las Cookies de redes sociales pueden almacenarse en su navegador mientras navega por haciaelautoempleo.com por ejemplo, cuando utiliza el botón de compartir contenidos de haciaelautoempleo.com en alguna red social.</p>
      <p>Las empresas que generan estas cookies correspondientes a las redes sociales que utiliza esta web tienen sus propias políticas de cookies:</p>
      <ul>
        <li>Cookie de Twitter, según lo dispuesto en su
          <a target="_blank" href="https://twitter.com/privacy">Política de privacidad y uso de cookies.</a>
        </li>
        <li>Cookie de Google+ y Google Maps, según lo dispuesto en su página sobre qué
          <a target="_blank" href="http://www.google.com/intl/es/policies/technologies/types/">tipo de cookies
            utilizan</a>.</li>
      </ul>
      <p>&nbsp;</p>
      <p>En cumplimiento de lo establecido en el artículo 22.2 de la LSSI se detallan las cookies que pueden instalarse habitualmente durante la navegación por este sitio web:</p>
      
        <table class="egt">
          <caption>Cookies que utiliza esta web.</caption>

          <tr>
            <th scope="col">DOMINIO</th>
            <th>NOMBRE DE LA COOKIE</th>
            <th>DURACION</th>
            <th>CONTENIDO</th>
            <th>DESCRIPCION</th>
          </tr>
          <tr>
            <th>web</th>
            <td>PHPSESSID</td>
            <td>Al finalizar la sesión de navegación.</td>
            <td></td>
            <td> Esta cookie es usada por el lenguaje de encriptado PHP para permitir que las variables de SESIÓN sean guardadas en el servidor web. Esta cookies es esencial para el funcionamiento de la web</td>
          </tr>

          <tr>
            <th>web.com </th>
            <td>_ga</td>
            <td>Caducada.</td>
            <td></td>
            <td>Se utiliza para cualquier tipo de conexión.</td>
          </tr>

          <tr>
            <th>web.com </th>
            <td>cookies_surestao</td>
            <td>viernes, 4 de mayo de 2018, 22:07:35</td>
            <td></td>
            <td>Se utiliza para cualquier tipo de conexión.</td>
          </tr>
          <tr>
            <th>.static.addtoany.com </th>
            <td>__utmz</td>
            <td>sábado, 1 de septiembre de 2018, 6:19:04</td>
            <td>s|utmccn=(referral)|utmcmd=referral|utmcct=/</td>
            <td>Se utiliza estadisticas de redes sociales.</td>
          </tr>
          <tr>
            <th>.static.addtoany.com </th>
            <td>__utma</td>
            <td>domingo, 1 de marzo de 2020, 17:19:04</td>
            <td>5444.1517675303.1519902741.1520007545.13</td>
            <td>Se utiliza para comprobar las sesiones</td>
          </tr>

        </table>
      <h2>Más información sobre las cookies</h2>
      <p>Puedes consultar el reglamento sobre cookies publicado por la Agencia Española de Protección de Datos en su “
        <a target="_blank" href="https://www.agpd.es/portalwebAGPD/canaldocumentacion/publicaciones/common/Guias/Guia_Cookies.pdf">Guía
          sobre el uso de las cookies</a>” y obtener más información sobre las cookies en Internet,
        <a href="#"></a>
      </p>
      <p>Si desea tener un mayor control sobre la instalación de cookies, puede instalar programas o complementos a su navegador, conocidos como herramientas de “Do Not Track”, que le permitirán escoger aquellas cookies que desea permitir.
      </p>
      <h2>Advertencia importante sobre las cookies</h2>
    </div>
  </div>
</section>

Francisco Castillo · Answer 2 · 2022-01-06T18:11:42+08:00

Francisco Castillo

2022-01-06T18:11:42+08:002022-01-06T18:11:42+08:00

Al parecer ya haz obtenido la respuesta necesaria, pero de todas me gustaría aportar.

Contiene la tabla con un DIV. [div table /div]
Si no funciona, trata de ordenar de otra forma el contenido, quizás apoyándote en la documentación para las clases de Bootstrap para lograr lo responsivo.
veo que no formateas los márgenes, quizás puede ser ese el error. (https://franciscoamk.com/usar-reset-css-o-normalizar/)
hacer un css para la tabla con distintos @mediaquery (https://www.w3schools.com/cssref/css3_pr_mediaquery.asp )

Esas son alternativas que quizás puedan solucionar tu problema, espero que te ayuden

Saludos!

1

How to fix "Content wider than screen" problem?

Ejemplo:

Ejemplo:

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?