0

Estoy haciendo una web en wordpress y quiero que el recuadro negro donde va el texto sea más ancho por ambos lados, es decir que haya menos espacio tanto por izquierda como por derecha. El problema es que cuando aumento el width de ese div lo único que hace es que el texto empiece a salirse por la derecha y el recuadro se va un poco más hacia la izquierda. Aquí se puede ver a lo que me refiero. El recuadro negro no se hace más ancho si no que simplemente las letras empiezan a salirse por un lado.

Os pongo el HTML (un poco difícil de entender) ya que está sin tabular en algunas cosas (culpa de Wordpress) y los CSS. Los div que creo que son los que hay tocar tienen la clase "container" y alomejor hay uno con clase "post-body" que también sirve. El archivo que yo intento tocar es style.css aunque hay otro que es index.css que no sé muy bien si afecta. Os subo tanto el html como los dos archivos css a WeTransfer ya que intenté ponerlos aquí pero me paso del límite de caracteres.

Archivos para descargar.

Extracto de código del HTML:

<div id="content">
  <div class="container clearfix">
    <div id="main_content">
      <div class="articles">
        <div class="one-post">
          <div id="post-50" class=
          "post-caption post-50 post type-post status-publish format-standard has-post-thumbnail hentry category-uncategorized">
            <h2><a href=
            "http://localhost/wordpress/2020/06/11/reunion-entre-los-actores-de-reparto-del-senor-de-los-anillos/"
            title=
            "Permalink to Reunión entre los actores de reparto del Señor de los Anillos"
            class="post_ttl">Reunión entre los actores de reparto del Señor
            de los Anillos</a></h2>
            <p class="post-meta"><span class="post-date">junio 11,
            2020</span> Posted in&nbsp;<a href=
            "http://localhost/wordpress/category/uncategorized/" rel=
            "category tag">Uncategorized</a> | <a href=
            "http://localhost/wordpress/2020/06/11/reunion-entre-los-actores-de-reparto-del-senor-de-los-anillos/#respond">
            0</a> | <span class="edit-link"><a class="post-edit-link" href=
            "http://localhost/wordpress/wp-admin/post.php?post=50&amp;action=edit">
            Edit</a></span></p>
          </div>
          <div class="post-body">
            <a href=
            "http://localhost/wordpress/2020/06/11/reunion-entre-los-actores-de-reparto-del-senor-de-los-anillos/"
            title=
            "Permalink to Reunión entre los actores de reparto del Señor de los Anillos">
            <img width="210" height="126" src=
            "http://localhost/wordpress/wp-content/uploads/2020/06/Reunion-online-reparto-El-Se%C3%B1or-de-los-Anillos1-210x126.jpg"
            class="alignleft featured_image wp-post-image" alt=""></a>
            <p>Este domingo 31 de mayo se celebrará una reunión online de
            buena parte del reparto y el equipo de la trilogía de ‘<a href=
            "https://elanillounico.com/tolkienpedia/peliculas/el-senor-de-los-anillos/"><em><strong>El
            Señor de los Anillos</strong></em></a>‘ organizada por el actor y
            cómico&nbsp;<strong>Josh Gad</strong>.</p>
            <p>Desde hace un mes, el actor y cómico
            estadounidense&nbsp;<strong>Josh Gad</strong>&nbsp;está
            celebrando reuniones online del equipo y el reparto de algunas
            películas célebres como ‘Regreso al futuro’, ‘Los Goonies’ o
            ‘Splash’ bajo el nombre Reunited Apart (Reunidos separados), y
            como&nbsp;<a rel="noreferrer noopener" href=
            "https://twitter.com/joshgad/status/1265699623261179904" target=
            "_blank">anunció ayer</a>, este domingo 31 de mayo le toca el
            turno a la trilogía de ‘<a href=
            "https://elanillounico.com/tolkienpedia/peliculas/el-senor-de-los-anillos/"><em><strong>El
            Señor de los Anillos</strong></em></a>‘. Según el&nbsp;<a rel=
            "noreferrer noopener" href=
            "https://www.youtube.com/watch?v=NzPpOzBxJfk" target=
            "_blank">tráiler</a>&nbsp;difundido por el propio Gad, en este
            encuentro bautizado como el “Retorno de los reyes” (Return of the
            Kins) participarán&nbsp;<a href=
            "https://elanillounico.com/tolkienpedia/personas/sean-astin/"><strong>Sean
            Astin</strong></a>,&nbsp;<a href=
            "https://elanillounico.com/tolkienpedia/personas/orlando-bloom/"><strong>Orlando
            Bloom</strong></a>,&nbsp;<a href=
            "https://elanillounico.com/tolkienpedia/personas/billy-boyd/"><strong>Billy
            Boyd</strong></a>,&nbsp;<a href=
            "https://elanillounico.com/tolkienpedia/personas/ian-mckellen/"><strong>Ian
            McKellen</strong></a>,&nbsp;<a href=
            "https://elanillounico.com/tolkienpedia/personas/dominic-monaghan/"><strong>Dominic
            Monaghan</strong></a>&nbsp;y&nbsp;<a href=
            "https://elanillounico.com/tolkienpedia/personas/elijah-wood/"><strong>Elijah
            Wood</strong></a>, aunque prometen muchas más
            sorpres...</p><a href=
            "http://localhost/wordpress/2020/06/11/reunion-entre-los-actores-de-reparto-del-senor-de-los-anillos/"
            class="readmore">Leer más...</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
html {
  background: #e8e2d4;
}

body {
  color: #ffffff;
}

a {
  color: #efb525;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1,
h2,
h3,
h4,
h5,
h6,
a.post_ttl {
  color: #fff;
  text-decoration: none;
}

a.post_ttl {
  font-size: 20px;
}

/*------------------------------ HEADER ------------------------------*/
#header {
  background: url(images/menu.png) left top repeat-x;
  position: relative;
}

#secondarymenu-container {
  position: relative;
}

/*------------------------------ SEARCH ------------------------------*/
#s {
  border: none;
  background: none;
  float: right;
  height: 25px;
  line-height: 25px;
  color: #000;
}

.searchbtn {
  height: 25px;
  width: 14px;
  margin: 0 10px;
}

.searchform {
  background: #F4F3F2;
  border: 1px solid #a0773d;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

/*------------------------------ CONTENT ------------------------------*/
.articles .one-post {}

.articles .post-meta a {
  color: #fff;
}

.articles .post-caption h1,
.articles .post-caption h2 {
  font-family: 'Overlock';
}

.articles .post-meta {
  border-top: 1px solid #333333;
  border-bottom: 1px solid #333333;
  font-family: 'Merienda One';
}

.articles .post-date {
  color: #dfa923;
  float: right;
}

#commentform #submit,
input.readmore,
a.readmore {
  background: #000;
  border: 1px solid #a0773d;
  color: #ad711f;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  font-family: 'Merienda One';
}

#commentform #submit,
input.readmore,
a.readmore:hover {
  background: #ad711f;
  color: #000;
}

.featured_image {
  padding: 4px;
  margin-top: 12px;
  background: #ad711f;
  border: none;
}

.googlemap {
  background: #ad711f;
  border: none;
}

.widget_posts ul li img,
.widget_flickr a {
  padding: 2px;
  background: #ad711f;
}

.pagination {
  margin: 30px 0;
}

.page-numbers {
  font-size: 20px;
  padding: 5px 10px;
}

a.page-numbers,
body.woocommerce nav.woocommerce-pagination ul li a,
body.woocommerce-page nav.woocommerce-pagination ul li a,
body.woocommerce #content nav.woocommerce-pagination ul li a,
body.woocommerce-page #content nav.woocommerce-pagination ul li a,
body.woocommerce nav.woocommerce-pagination ul li span,
body.woocommerce-page nav.woocommerce-pagination ul li span,
body.woocommerce #content nav.woocommerce-pagination ul li span,
body.woocommerce-page #content nav.woocommerce-pagination ul li span {
  color: #fff;
  text-decoration: none;
}

.woocommerce #content nav.woocommerce-pagination ul li,
.woocommerce nav.woocommerce-pagination ul li,
.woocommerce-page #content nav.woocommerce-pagination ul li,
.woocommerce-page nav.woocommerce-pagination ul li {
  margin-right: 3px;
}

a.page-numbers:hover,
span.page-numbers,
body.woocommerce nav.woocommerce-pagination ul li span.current,
body.woocommerce-page nav.woocommerce-pagination ul li span.current,
body.woocommerce #content nav.woocommerce-pagination ul li span.current,
body.woocommerce-page #content nav.woocommerce-pagination ul li span.current,
body.woocommerce nav.woocommerce-pagination ul li a:hover,
body.woocommerce-page nav.woocommerce-pagination ul li a:hover,
body.woocommerce #content nav.woocommerce-pagination ul li a:hover,
body.woocommerce-page #content nav.woocommerce-pagination ul li a:hover,
body.woocommerce nav.woocommerce-pagination ul li a:focus,
body.woocommerce-page nav.woocommerce-pagination ul li a:focus,
body.woocommerce #content nav.woocommerce-pagination ul li a:focus,
body.woocommerce-page #content nav.woocommerce-pagination ul li a:focus {
  color: #ad711f;
}

/*------------------------------ FOOTER ------------------------------*/
#footer {
  background: url(images/footer.jpg) 50% bottom no-repeat;
}

#footer .container {}

#footer a,
#footer h3 {}

#footer .footer_txt {
  padding: 14px 0;
  padding-left: 50px;
  border-top: 1px solid #363636;
}

/*------------------------------ WIDGETS AND SLIDER ------------------------------*/
#content .widget .caption h3 {
  color: #efb525;
  font-family: 'Overlock';
  margin: 0 -10px 15px;
  padding: 0 10px;
  font-size: 20px;
  height: 46px;
  line-height: 46px;
}

.content-r #content .widget .caption h3 {
  background: url(images/widget-r.png) left top no-repeat;
}

.content-l #content .widget .caption h3 {
  background: url(images/widget-l.png) right top no-repeat;
}

.content-lr .sidebar.right .widget .caption h3,
.content-r2 .sidebar.right .widget .caption h3 {
  background: url("images/widget-r.png") left top no-repeat;
}

.content-lr .sidebar.left .widget .caption h3,
.content-l2 .sidebar.left .widget .caption h3 {
  background: url(images/widget-l.png) right top no-repeat;
}

.fp-next {
  background-position: left 50%;
}

.fp-prev {
  background-position: right 50%;
}

/*  -==========================- DESKTOP -==========================-  */
@media only screen and (min-width:1024px) {
  #content-top {
    height: 5px;
    background: url(images/content/top-n.png) left top no-repeat !important;
  }

  #content-bottom {
    height: 5px;
    background: url(images/content/bottom-n.png) left top no-repeat !important;
  }

  #content .container {
    background: url(images/content/main-n.png) left top repeat-y !important;
  }

  #logo {
    position: absolute;
    left: 50%;
  }

  #logo img {
    margin-left: -50%;
  }

  .menusearch {
    float: left;
    margin-top: 44px;
    margin-left: 20px;
  }

  /*------------------------------ MENU ------------------------------*/
  #secondarymenu-container {
    padding-top: 54px;
    height: 131px;
    position: relative;
    z-index: 999;
  }

  #secondarymenu {
    float: right;
    margin-top: 50px;
  }

  #secondarymenu li {}

  #secondarymenu a {
    text-decoration: none;
    padding: 8px 10px;
    display: block;
    color: #fff;
    font-family: 'Overlock';
    font-size: 15px;
  }

  #secondarymenu a:hover {
    color: #efb525;
  }

  #mainmenu-container {
    height: 54px;
    width: 1000px;
    position: absolute;
    top: 0;
    z-index: 999;
  }

  #mainmenu li a {
    text-align: center;
    color: #fff;
    display: block;
    text-decoration: none;
    font-family: 'Uncial Antiqua';
    padding: 18px 20px;
  }

  #mainmenu li {
    padding-left: 7px;
    position: relative;
  }

  #mainmenu li a:hover {
    color: #efb525;
  }

  #header li ul {
    top: 38px;
  }

  #header #mainmenu li ul {
    top: 52px;
  }

  #header li ul .transparent {
    background: #000;
    -moz-opacity: 0.30;
    opacity: 0.30;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha"(Opacity=30);
    border: 1px solid #977039;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
  }

  #header li ul .inner {
    background: none;
    padding: 0;
  }

  #header ul.children li,
  #header .sub-menu li {
    padding: 0 !important;
    margin: 0 !important;
    height: 25px;
    line-height: 25px;
  }

  #header ul.children li a,
  #header .sub-menu li a {
    color: #fff !important;
    padding: 0 !important;
    background: none;
    height: 25px;
    line-height: 25px;
  }

  #header ul.children li a:hover,
  #header .sub-menu li a:hover {
    color: #fff !important;
  }

  #header .sub-menu .sub-menu {
    top: 0 !important;
  }

  /*------------------------------ SLIDER ------------------------------*/
  .slider-container {
    padding: 16px 0;
    background: url(images/slider.png) left top no-repeat;
    margin: 10px -34px;
    width: 1068px;
    height: 354px;
  }

  .fp-next,
  .fp-prev {
    width: 88px;
    height: 407px;
  }

  .slider {
    position: relative;
    background: none;
    padding: 0px;
    border: none;
  }

  .fp-prev-next-wrap {
    margin: 0;
  }

  .fp-prev,
  .fp-next {
    margin-top: -204px;
  }

  .slider-nothumb .fp-slides,
  .slider-nothumb .fp-thumbnail,
  .slider-nothumb .fp-slides-items {
    height: 188px;
  }

  .fp-slides,
  .fp-thumbnail,
  .fp-slides-items {
    height: 350px;
    width: 974px;
  }

  .fp-content-fon {
    border-bottom: none;
    border-left: none;
    border-right: none;
  }

  .fp-content-fon,
  .fp-content {
    left: 30px;
    right: 30px;
    bottom: 0;
  }

  .slider-nothumb .fp-content-fon {
    background: #fff;
  }

  .slider-nothumb .fp-content a,
  .slider-nothumb .fp-content p {
    color: #000;
  }

  .fp-nav {
    display: none;
  }
}

/* WooCommerce */
.woocommerce a.button.alt,
.woocommerce-page a.button.alt,
.woocommerce button.button.alt,
.woocommerce-page button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page #respond input#submit.alt,
.woocommerce #content input.button.alt,
.woocommerce-page #content input.button.alt,
.woocommerce-page #content .products li a.button {
  background: #000 !important;
  color: #ad711f !important;
  border: 1px solid #a0773d !important;
  border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  -webkit-border-radius: 3px !important;
  text-shadow: none !Important;
  box-shadow: none !Important;
  font-weight: normal !important;
}

.woocommerce a.button.alt:hover,
.woocommerce-page a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce-page button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce-page input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce-page #respond input#submit.alt:hover,
.woocommerce #content input.button.alt:hover,
.woocommerce-page #content input.button.alt:hover,
.woocommerce-page #content .products li a.button:hover {
  background: #ad711f !important;
  color: #000 !important;
}

.widget.woocommerce.widget_product_search #s {
  background: #000 !important;
  color: #fff !important;
  border: 1px solid #a0773d !important;
  border-radius: 3px !important;
  -moz-border-radius: 3px !important;
  -webkit-border-radius: 3px !important;
}

.widget.woocommerce.widget_product_search #searchsubmit {
  background: #262626;
  padding: 2px 6px;
  color: #fff;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-handle,
.woocommerce-page .widget_price_filter .ui-slider .ui-slider-handle {
  background: #ad711f !important;
}

.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce-page .widget_price_filter .ui-slider .ui-slider-range {
  background: #7d5216 !important;
}

.woocommerce-page #main_content>#container>#content {
  padding: 15px 0 !important;
}

.payment_methods.methods {
  color: #000 !important;
}

/*  -==========================- TABLET -==========================-  */
@media only screen and (min-width:640px) and (max-width:1023px) {
  #header {
    background: none;
  }

  #logo {
    float: left;
    margin-left: 0px;
  }

  #header-banner {
    margin-top: 25px;
    float: right;
  }

  /*------------------------------ MENU ------------------------------*/
  #secondarymenu-container {
    padding-top: 0px;
  }

}

/*  -==========================- MOBILE -==========================-  */
@media only screen and (min-width:240px) and (max-width:639px) {
  .menusearch {
    padding: 3px 0;
  }

  #header {
    background: none;
  }

  #logo {}

  .fp-next,
  .fp-prev {
    margin: 0 -5px;
  }

  .footer-widgets .widgetf:first-child {
    border: none;
  }

  #footer {
    width: 100%;
  }

  .widgetf {
    border-top: 1px solid #d3d3d3;
  }

  .articles .post-date {
    float: none;
  }

  .articles dt p img {
    display: none;
  }

  .fp-nav {
    bottom: -5px;
  }

  .slider-container {
    padding-bottom: 20px;
  }

  #s {
    width: 70%;
  }
}
1
  • No puedo porque todo el código son unos 70.000 caracteres y supera el máximo. Por eso subí el enlace.
    – Meran
    Commented el 14 jun. 2020 a las 14:04

1 respuesta 1

0

He estado mirando tu texto y creo que vi el fallo. Prueba asignando padding-right:10px; y margin-right:10px; al div correspondiente. Eso debería solucionar el fallo.

7
  • He probado lo que me has dicho y me ha funcionado en cuanto al texto, pero no soluciona mi problema de hacer el recuadro negro más amplio. Básicamente lo que quiero es hacer que ocupe más espacio por ambos lados, para que haya menos espacio vacío por la izquierda y derecha por fuera del recuadro negro.
    – Meran
    Commented el 14 jun. 2020 a las 14:03
  • No veo ninguna referencia a los divs que intentamos modificar. Prueba esto: En el container clearfix, añade justo después de class="container clearfix" esto: style="width:100%".
    – Tupi
    Commented el 14 jun. 2020 a las 18:20
  • Lo he hecho y se queda así: gyazo.com/886aee6e3da50277a318b95dc7f0a383
    – Meran
    Commented el 15 jun. 2020 a las 0:20
  • Entonces, borra el código que te pasé y ponlo en el class= "container"
    – Tupi
    Commented el 15 jun. 2020 a las 15:49
  • Tampoco funciona.
    – Meran
    Commented el 15 jun. 2020 a las 18:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.