Botons dins les pestanyes

Botons dins les pestanyes

per MARTA GARRIGA GINESTA -
Nombre de respostes: 5

Benvolguts,

m'agradaria poder distribuir i/o justificar l'amplada de les pestanyes per ajustar-les a l'amplada de què té el text més llarg, però no me'n surto.

Adjunt l'enllaç de la pàgina on és: 

https://agora.xtec.cat/iesagustiserra/preinscripcio-curs-2023-2024/

La pestanya és: [TABS_R id=20827].

Us adjunto unes captures per mostrar-vos-ho:Captura llistes

Captura pestanya

Captura caixa pestanya


Gràcies avançades i sense més ni més, rebeu una cordial salutació.

En resposta a MARTA GARRIGA GINESTA

Re: Botons dins les pestanyes

per MONICA GRAU PRIETO -
Hola, Marta,
has d'afegir l'atribut d'amplada "width" amb una mida en píxels. T'ho hem fet a la primera de les pestanyes (ESO). També hem esborrat els espais que havies fet servir per eixamplar el botó. Et passo el codi perquè ho puguis veure.

Recorda verificar que els <div> i els </div> són correctes perquè no se't desmunti com altres vegades.

<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:800px; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/03/1-Calendari-preinscripcio-ESO-2023_2024.pdf" target="_blank" rel="noopener noreferrer">CALENDARI</a></div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:800px; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/06/5.-INFORME_ASSIGNADES_INFORME_ASSIGNADES_12_06_23.pdf" target="_blank" rel="noopener noreferrer">LLISTA ALUMNAT ASSIGNAT AL CENTRE 1a PETICIÓ <span style="color: #ff0000;">(12/06/23)</a></div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:800px; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/06/6.-INFORME_PREINSCRITES_OME_INFORME_PREINSCRITES_OME_12_06_23.pdf" target="_blank" rel="noopener noreferrer">LLISTA ALUMNAT PREINSCRITS AL CENTRE <span style="color: #ff0000;">(12/06/23)</a></div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:800px; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/06/7.-INFORME_LLISTA_ESPERA_OME_LLISTA_ESPERA_12_06_23.pdf" target="_blank" rel="noopener noreferrer">LLISTA D'ESPERA ALUMNAT <span style="color: #ff0000;">(12/06/23)</a></div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:800px; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/05/INFORME_LLISTA_ORDENADA_11_05_23.pdf" target="_blank" rel="noopener noreferrer">LLISTA SOL·LICITUDS PRIMERA PETICIÓ ORDENADA<span style="color: #000000;"><span style="color: #ffffff;"> (11/05/23)</a></div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:800px; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/05/INFORME_BAREM_RESOLTES_03_05_23.pdf" target="_blank" rel="noopener noreferrer">LLISTA AMB PUNTUACIÓ un cop resoltes les reclamacions (03/05/23)</a></div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:800px; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/04/INFORME_BAREM_PROVISIONAL_ESO_21_04_23.pdf" target="_blank" rel="noopener noreferrer">LLISTAT BAREM PROVISIONAL (21/04/23)</a>
</div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:800px; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/03/2-Oferta-de-places-ESO-2023_2024-1.pdf" target="_blank" rel="noopener noreferrer">OFERTA DE PLACES</a></div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:800px; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/03/3-Informacio-preinscripcio-ESO-2023_2024.pdf" target="_blank" rel="noopener noreferrer">INFORMACIÓ</a></div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:800px; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://preinscripcio.gencat.cat/ca/estudis/eso/preinscriute/sollicitud/" target="_blank" rel="noopener noreferrer">FES LA SOL·LICITUD</a></div>
</div>

Fins ara,
Mònica
En resposta a MONICA GRAU PRIETO

Re: Botons dins les pestanyes

per MARTA GARRIGA GINESTA -
Hola de nou, Mònica,

ara es veu perfecte des de l'ordinador, però des del mòbil no perquè no s'adapta. 
Adjunto captures: ⁣
Captura pestanyes mòbils 1

i:
Captura pestanyes mòbils 2


Ja direu.


Una salutació cordial, i gràcies avançades.
En resposta a MARTA GARRIGA GINESTA

Re: Botons dins les pestanyes

per MONICA GRAU PRIETO -
Hola, Marta,
malauradament, és incompatible una cosa amb l'altra, perquè siguin de la mateixa mida, s'ha de fixar l'amplada, i això fa que en dispositius mòbils no es visualitzi sencer.
Haureu de triar a què li doneu prioritat.

Fins ara,
Mònica
En resposta a MONICA GRAU PRIETO

Re: Botons dins les pestanyes

per MARTA GARRIGA GINESTA -
Moltes gràcies, Mònica.
En resposta a MARTA GARRIGA GINESTA

Re: Botons dins les pestanyes

per MONICA GRAU PRIETO -
Hola. Marta,
he seguit donant-li voltes i si canvies l'amplada en píxels per 100%, sembla que millora.

Et passo el codi actualitzat:

<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:100%; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/03/1-Calendari-preinscripcio-ESO-2023_2024.pdf" target="_blank" rel="noopener noreferrer">CALENDARI</a></div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:100%; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/06/5.-INFORME_ASSIGNADES_INFORME_ASSIGNADES_12_06_23.pdf" target="_blank" rel="noopener noreferrer">LLISTA ALUMNAT ASSIGNAT AL CENTRE 1a PETICIÓ <span style="color: #ff0000;">(12/06/23)</a></div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:100%; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/06/6.-INFORME_PREINSCRITES_OME_INFORME_PREINSCRITES_OME_12_06_23.pdf" target="_blank" rel="noopener noreferrer">LLISTA ALUMNAT PREINSCRITS AL CENTRE <span style="color: #ff0000;">(12/06/23)</a></div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:100%; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/06/7.-INFORME_LLISTA_ESPERA_OME_LLISTA_ESPERA_12_06_23.pdf" target="_blank" rel="noopener noreferrer">LLISTA D'ESPERA ALUMNAT <span style="color: #ff0000;">(12/06/23)</a></div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:100%; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/05/INFORME_LLISTA_ORDENADA_11_05_23.pdf" target="_blank" rel="noopener noreferrer">LLISTA SOL·LICITUDS PRIMERA PETICIÓ ORDENADA<span style="color: #000000;"><span style="color: #ffffff;"> (11/05/23)</a></div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:100%; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/05/INFORME_BAREM_RESOLTES_03_05_23.pdf" target="_blank" rel="noopener noreferrer">LLISTA AMB PUNTUACIÓ un cop resoltes les reclamacions (03/05/23)</a></div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:100%; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/04/INFORME_BAREM_PROVISIONAL_ESO_21_04_23.pdf" target="_blank" rel="noopener noreferrer">LLISTAT BAREM PROVISIONAL (21/04/23)</a>
</div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:100%; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/03/2-Oferta-de-places-ESO-2023_2024-1.pdf" target="_blank" rel="noopener noreferrer">OFERTA DE PLACES</a></div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:100%; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://agora.xtec.cat/iesagustiserra/wp-content/uploads/usu1681/2023/03/3-Informacio-preinscripcio-ESO-2023_2024.pdf" target="_blank" rel="noopener noreferrer">INFORMACIÓ</a></div>
</div>
<div class="row">
<div class="columns small-12 large-10" style="text-align: left;"><a class="button normal" style="text-align: left !important; width:100%; padding: 0.5em; margin: 0.1em; color: white !important; background-color: #767676;" href="https://preinscripcio.gencat.cat/ca/estudis/eso/preinscriute/sollicitud/" target="_blank" rel="noopener noreferrer">FES LA SOL·LICITUD</a></div>


Fins ara,
Mònica