Ancho del foro acorde a las distintas resoluciones de pantalla.

¡Hola! 

Me han llegado mensajes de algunos usuarios diciéndome que en su ordenador aparece una barra de desplazamiento porque el foro es demasiado ancho para su resolución de pantalla. La cuestión es que estoy intentando arreglarlo, pero esto de los anchos siempre se me ha hecho un poco cuesta arriba y termino metiendo la zarpa. He probado poniendo un porcentaje en la configuración del foro y también a añadir un porcentaje en wrap, pero ninguna de las dos cosas me termina de funcionar y además tengo miedo de que al cerrar el ancho se me empiecen a montar los perfiles o la sidebar encima de los posts.

Así que lanzo la pregunta ¿Qué forma hay de que el foro se vea bien con todo tipo de resoluciones sin que se me deforme? 
Muchas gracias por adelantado  

A ver, antes de nada unos fundamentos.

Por defecto, los foros Foroactivo están maquetados para que se adapten a la mayor parte de pantallas. Como es lógico, no se puede adaptar una web a todo tipo de resoluciones porque siempre hay las resoluciones de dispositivos móviles (AKA tablets y móviles) que tienen muy poco ancho. Sin embargo, en este tipo de dispositivos ya se espera el uso de la barra de desplazamiento horizontal.

El problema llega cuando nosotros modificamos los diseños. Tenemos que asegurarnos de que programamos los foros para que sean autoadaptables. Por lo general muy pocos foros lo hacen por lo cual te voy a recomendar una cosa. Para asegurarte de que no se desmontan o quedan espacios en blanco al tener pantallas grandes, lo que puedes hacer es forzar un ancho fijo. El estándar actual está en 960px de ancho, que es una medida más que razonable para que sea visible en la mayor parte de pantallas.

A continuación un código CSS para forzar el ancho de tu foro al estándar:

Código:

#wrap { width: 960px; }

Recuerda poner el código CSS al final de todos los que tengas. ¡Esto es importante, en serio!

Espero que esto te sea de ayuda.

Muchas gracias por la rapidez, Bret. La cuestión es que eso es más o menos lo que había probado (aunque no sabía que el #wrap debía de ir al final del CSS), pero lo he repetido con las medidas que me has dado y sigo con el mismo problema. Ahora mismo con una resolución de 1280x768 se sigue viendo la barra de desplazamiento. Creo que lo que está haciendo que pase esto es por el widget que tengo puesto en el sidebar para la navegación.

En el wrap tengo puesto un margen izquierdo bastante amplio para que el foro no aparezca debajo del sidebar, en el que tengo un widget con una posición fija para que aparezca aunque haga scroll (Me explico fatal, lo siento), así que supongo que lo que está dando estos problemas de ancho es ese margen, porque hasta ahora nunca había tenido ese problema en otros foros.

Lo que dices tú es una causa muy probable y tranquilo, creo que entendí lo que dices.

El problema entonces que lo que normalmente tiene que tener 960px es el contenido del foro y en tu foro lo tienes dividido en módulos y cuerpo del foro, lo cual no van a ser 960px exactos para el cuerpo del foro.

Si me pasas la URL de tu foro puedo hacer los números necesarios para que tenga exactamente 960px y ya de paso si quieres te compruebo que no se vea nada descuadrado al cambiar las medidas. Si es por privacidad, recuerda que puedes utilizar la baliza [ hide] para que nadie más vea tu foro.

Link: http://townsville-rpg.foroactivo.com/

También intenté restando el ancho del sidebar y no hay manera ;_; Así que a ver si puedes iluminarme el melón, porque definitivamente los números no son lo mío.

No has puesto el enlace en hyde así que he acabado viendo el foro. He de decir que yo no veo ninguna barra espaciadora así que no tengo ese problema. ¿Has intentado a ponerle un menor tamaño al warp?. Yo por lo que veo es que hay mucho espacio entre lo que es el esqueleto del foro, los datos de los foros (el título, descripción, último tema....) se ven muy separados de las "paredes" del propio foro. ¿Tienes algún código de padding (creo que era el padding eh) o algo?

Mira, en primer lugar te voy a recomendar una herramienta que seguro que te será de utilidad en un futuro para cuando quieras ver cómo se ve tu foro en otras pantallas. En Firefox hay una herramienta que se llama Vista de diseño adaptable que te permitirá ver tu foro en varias resoluciones desde tu ordenador. ¡Adiós a las quejas de los usuarios!

Volviendo a tu problema,  he estado comprobando qué es lo que ocurre y ya te aviso que vas a tener muchísimos problemas al cambiar el ancho de tu foro. Te explico algunas ideas. En primer lugar, el cuerpo de tu foro no lo recomiendo bajar a menos de 960px (por el rollo de restar el ancho de los módulos para tener 960px en la página completa) porque se van a descuadrar muchas cosas debido a la forma en la que está maquetado.

¿Mi recomendación? Cambiar el ancho del foro a 960px y hacer que los módulos desaparezcan para aquellas personas a las que les aparezca la barra de desplazamiento.

Si quieres proseguir con esto tendrás que agregar los siguientes códigos CSS:

Código:

#wrap { width: 960x; min-width: 960px; }

Cambiar el ancho del cuerpo del foro.

Código:

@media screen and (max-width: 1300px) {
#left { display: none; }
#wrap { margin: 10px auto !important; }
}

Hacer que cuando el foro no quepa, se oculten automáticamente los módulos y se centre el foro (puedes comprobar esto redimensionando tu ventana). Personalmente creo que hace un efecto bastante bonito y es una buena solución.

Al aplicar dos cambios se descuadran tres cosas. Los foros, los mensajes y la cabecera.

• Para arreglar los mensajes debes buscar .postbody en tu foro y cambiar donde dice «width: 735px;» por «width: 680px;».
• Para arreglar el logo tienes que agregar los siguientes CSS. Ten en cuenta que he agregado algunos CSS extra porque supongo que quieres un centrado perfecto del mismo.

Código:

#page-header .navbar { margin-top: -9px; width: auto; margin-left: 0; }
#logo { padding: 0; }
#page-header .headerbar { padding: 0; }
// Ten en cuenta que la siguiente línea es un extra para redimensionar el logo.
#logo img { max-width: 100%; }

Lo de redimensionar el logo puede hacer que tu imagen se vea un poco mal, si eres más perfeccionista deberías cortarla con photoshop para que tenga 960px de ancho exactos.

• Para arreglar las categorías pon este CSS:

Código:

.forabg .row .icon { margin-left: 45px; }

Y eso es todo. Cualquier problema avísame que sigo aquí.

Vale, perfecto *-* Se me ha redimensionado todo lo del foro perfectamente.

Y aparte de esto, un par de dudas:

¿Habría alguna manera de afinar un poco más los anchos a los que desaparece el widget lateral? Me explico, ahora al menguar el foro ha quedado un margen derecho más amplio, entonces me gustaría saber si podría mover un poco más el foro a la derecha y hacer que los widgets solo desaparezcan con las resoluciones más pequeñas. Es un poco de ser quisquillosa ya, pero parte de la información del widget es importante y me gustaría que estuviese a la vista del mayor número de usuarios posible. No se si me explico.

El widget de últimos temas que tengo puesto en el tablón de anuncios se monta sobre el borde ¿Se puede editar tranquilamente metiéndolo dentro de una caja de menor ancho? Porque del últimos temas me espero cualquier cosa, que me lleva de cabeza desde que decidí moverlo de su sitio xD

Muchísimas gracias por el consejo de la viesta de diseño adaptable y la ayuda y perdón por los quebraderos de cabeza y tantísima pregunta.

No pasa nada por que hagas preguntas, es más, lo que me tocaría las pelotas sería que te fueses sin tenerlo todo como tu te esperabas.

A ver, para quitar ese margen que dices lo que tienes que hacer es, en el código base que te di («#wrap { width: 960x; min-width: 960px; }») agregar un «margin-right: 0;». Luego en el segundo código principal, en esta línea:

Código:

@media screen and (max-width: 1300px) {

Lo que tienes que hacer es cambiar el 1300 por un número. Yo puse el 1300 por redondeo. Si quieres el número exacto que tienes que poner es 1242 sin contar ya con el margin derecho. Si después en un futuro vuelves a querer ponerlo, serán 1257 exactos. De todas formas siempre puedes cambiar tú los números a cómo veas.

Bueno, lo he apañado de forma que los widgets aparezcan hasta los 1280. De ahí para abajo nada, así que supongo que tendré que cambiar algunas cosas de sitio para que el karma esté siempre visible en el índice y dejar cosas menos importantes en el widget para que nadie se lo pierda.

Muchísimas gracias por la ayuda *-*