Menu icon Foundation
Button and Label wich are not resized

Labelbuttonnotresized

Hello guys, i put a label and a button in a left side of my structure using SMALL columns .

I could see when i resize browser form from max to min, the label and the button were not resized as in attacched image.

How could i solve this ?

I have also problem centering button to the panel....how could i center it ?

<div class="panel costolehead">Guide e Tutorial</div>
    					<div class="panel costole">
						<ul class="side-nav">
						<li><img src="http://www.pcprimipassi.it/images/GuideLittle.gif"> 
						<span class="label">Macrosezioni</span>
						</li>
						  <li><a href="#">Link 1</a></li>
						  <li><a href="#">Link 2</a></li>
						  <li><a href="#">Link 3</a></li>
						  <li><a href="#">Link 4</a></li>
						  <li><a href="#">Link 1</a></li>
						  <li><a href="#">Link 2</a></li>
						  <li><a href="#">Link 3</a></li>
						  <li><a href="#">Link 4</a></li>
						</ul>
						</div>
						
						
						<div class="panel costolehead">Sondaggi</div>
						<div class="panel costole">Pezzo per sondaggio
							<a href="#" class="button radius">Vota!</a>
						</div>
						
						<div class="panel costolehead">Newsletter</div>
						<div class="panel costole">Pezzo per newsletter</div>
						
						<div class="panel costole">Banner scaper sn1</div>
						
						<div class="panel costolehead">Dizionario tecnico</div>
						<div class="panel costole">Pezzo per Dizionario</div>
						
						<div class="panel costolehead">Siti affiliati</div>
						<div class="panel costole">Pezzo per Affiliazioni</div>
						
						<div class="panel costole">Banner scaper sn2</div>
						
				</div>
            

         

buttonlabelresizingsmall columns

Labelbuttonnotresized

Hello guys, i put a label and a button in a left side of my structure using SMALL columns .

I could see when i resize browser form from max to min, the label and the button were not resized as in attacched image.

How could i solve this ?

I have also problem centering button to the panel....how could i center it ?

<div class="panel costolehead">Guide e Tutorial</div>
    					<div class="panel costole">
						<ul class="side-nav">
						<li><img src="http://www.pcprimipassi.it/images/GuideLittle.gif"> 
						<span class="label">Macrosezioni</span>
						</li>
						  <li><a href="#">Link 1</a></li>
						  <li><a href="#">Link 2</a></li>
						  <li><a href="#">Link 3</a></li>
						  <li><a href="#">Link 4</a></li>
						  <li><a href="#">Link 1</a></li>
						  <li><a href="#">Link 2</a></li>
						  <li><a href="#">Link 3</a></li>
						  <li><a href="#">Link 4</a></li>
						</ul>
						</div>
						
						
						<div class="panel costolehead">Sondaggi</div>
						<div class="panel costole">Pezzo per sondaggio
							<a href="#" class="button radius">Vota!</a>
						</div>
						
						<div class="panel costolehead">Newsletter</div>
						<div class="panel costole">Pezzo per newsletter</div>
						
						<div class="panel costole">Banner scaper sn1</div>
						
						<div class="panel costolehead">Dizionario tecnico</div>
						<div class="panel costole">Pezzo per Dizionario</div>
						
						<div class="panel costolehead">Siti affiliati</div>
						<div class="panel costole">Pezzo per Affiliazioni</div>
						
						<div class="panel costole">Banner scaper sn2</div>
						
				</div>
            

         
Rafi Benkual about 4 years ago

Made a demo of your code here: http://codepen.io/rafibomb/pen/xwxjMP?editors=110

I'm not seeing what you're showing in the image. If your column is too small to hold buttons and labels they may overflow. The buttons and labels have padding and text in them that shouldn't wrap.

Stefano Ravagni about 4 years ago

I'm not registered in the codepen...

i try to copy here a complete test code which could show what i say.

How you colud see, when at minimum dimension in the browser, text, label and button in the left side are not resized...

I'm sure i wrong something.... thanks for your help

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation | Welcome</title>
    <link rel="stylesheet" href="css/foundation.css" />
  <link rel="stylesheet" href="css/MyApp.css" />
    <script src="js/vendor/modernizr.js"></script>

  </head>
  <body>

    <div class="row">
    <div class="small-3-5 columns">
          <img src="img/Logo.jpg" align="left"/>
        </div>
        <div class="small-8-5 columns right">
          <img src="http://www.pcprimipassi.it/images/Banner/Banner%20ADV/ELIOS729x90.png" align="right"/>
        </div>   

  </div>


  <div class="row">
    <div class="small-12 columns">
        <nav class="top-bar">

          <section class="top-bar-section">
          <!-- Left Nav Section -->
          <ul class="left">
            <li><a href="#">Home</a></li>
            <li><a href="#">Corsi gratuiti</a></li>
            <li><a href="#">Download</a></li>
            <li><a href="#">Forum</a></li>
            <li><a href="#">Domande Top</a></li>
            <li><a href="#">Guide gratuite</a></li>
            <li><a href="#">Video Guide</a></li>
            <li><a href="#">Assistenza</a></li>

          </ul>      
          </section>
        </nav>

    </div>
  </div>







  <div class="row">

      <div class="small-2 columns">

        <!-- costola sinistra -->
        <div class="panel costolehead">Guide e Tutorial</div>
            <div class="panel costole">
            <ul class="side-nav">
            <li><img src="http://www.pcprimipassi.it/images/GuideLittle.gif"> 
            <span class="label">Macrosezioni</span>
            </li>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
              <li><a href="#">Link 4</a></li>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
              <li><a href="#">Link 4</a></li>
            </ul>
            </div>


            <div class="panel costolehead">Sondaggi</div>
            <div class="panel costole">Pezzo per sondaggio
              <a href="#" class="button radius">Vota!</a>
            </div>

            <div class="panel costolehead">Newsletter</div>
            <div class="panel costole">Pezzo per newsletter</div>

            <div class="panel costole">Banner scaper sn1</div>

            <div class="panel costolehead">Dizionario tecnico</div>
            <div class="panel costole">Pezzo per Dizionario</div>

            <div class="panel costolehead">Siti affiliati</div>
            <div class="panel costole">Pezzo per Affiliazioni</div>

            <div class="panel costole">Banner scaper sn2</div>

        </div>
        <!-- costola sinistra fine-->

      <div class="small-8 columns">

        <div class="row collapse">
        <div class="small-7 columns">
          <div class="panel testate radius">.Articoli</div>
            <div id="ElencoArticoli">
              <a href="#">Come effettuare il downgrade da Windows 10 a Windows 7-8</a>
              <div class="panel articoli radius">
              <span data-tooltip aria-haspopup="true" class="has-tip" title="Come effettuare il downgrade da Windows 10 a Windows 7-8">
              <img src="http://www.pcprimipassi.it/images/fotolezioni/ThumbDowngradeW10-W7-8.png">
              </span>
              <br><br>
              testo dell'articolo ...

              </div>
              <hr>
            </div>  
        </div>

        <div class="small-5 columns">

        <div class="panel testate radius">.Dalla Redazione</div>

        <div id="RedazionaleTitle">
            <img src="img/ICONAEditoriale.png" align="left">
            <a href="#">Come effettuare il downgrade da Windows 10 a Windows 7-8</a>
            <div class="panel redazionale radius">
            <span data-tooltip aria-haspopup="true" class="has-tip" title="Come effettuare il downgrade da Windows 10 a Windows 7-8">
            </span>
            prova del testo come viene nel redazionale...

            </div>


        </div>          

      </div>
        </div>

         <div class="row collapse">
            <div class="small-12 columns">
            Parte centrale finale
            </div>
        </div>
      </div>

      <div class="small-2 columns">

        <!-- costola destra -->
        <div class="panel costolehead">:: Cerca nel sito</div>
          <div class="panel costole">
          <ul class="side-nav">
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
              <li><a href="#">Link 4</a></li>
              <li><a href="#">Link 1</a></li>
              <li><a href="#">Link 2</a></li>
              <li><a href="#">Link 3</a></li>
              <li><a href="#">Link 4</a></li>
          </ul>
          </div>

        <div class="panel costole">Banner dx 1</div>

        <div class="panel costole">Sostienici</div>

        <div class="panel costole">Social network</div>

            <div class="panel costolehead">Ultimi Download</div>
            <div class="panel costole">Pezzo per download</div>

            <div class="panel costolehead">Domande top/faq</div>
            <div class="panel costole">Pezzo per faq</div>

            <div class="panel costole">Banner scaper dx1</div>

            <div class="panel costolehead">Tipi di files</div>
            <div class="panel costole">Pezzo per Tipi di files</div>

            <div class="panel costolehead">Team e contatti</div>
            <div class="panel costole">Pezzo per contatti</div>


      </div>
      <!-- costola destra fine -->





  </div>



    <div class="row">
    <div class="panel">Prova pannello</div>
    </div>







    <div class="row collapse">
    <div class="small-12 columns text-center">
        <div class="panel scurissimo radius">
        Versione 4.0 Developed by Stefano Ravagni
        </div>
    </div>  
    </div>


      <footer class="row collapse">
        <div class="small-12 columns">
          <hr/>
          <div class="row">
            <div class="small-7 columns">
              <p><b>PCPRIMIPASSI.IT è proprietario dei contenuti.</b></p>
            </div>
            <div class="small-5 columns">
              <ul class="inline-list right">
                <li><a href="#">Regolamento</a></li>
                <li><a href="#">Privacy & Cookies</a></li>
                <li><a href="#">Avvertenze</a></li>
              </ul>
            </div>
          </div>

        </div> 
      </footer>



  </body>
</html>

Rafi Benkual about 4 years ago

You just need to fork the codepen to share the url.