Menu icon Foundation
tab & accordion breakpoint

Hello, in the code below. How can I change the breakpoint to 53 em? Before it switches to accordion view for smartphones. My topnav break at 53 so I would want this below to break aswell.

Where do I specify this in the foundation.css or how can I override it in my style.css?

Many thanks in advance.

<section class="center-menu">
    <div class="center-menu-container">
	  <div class="hide-for-small">
		<dl class="tabs" data-tab="">
		  <dd class="active" id="#panel1dd" ><a href="#panel1">IT</a></dd>

		  <dd id="#panel2dd"><a href="#panel2">Telefoni</a></dd>

		  <dd id="#panel3dd"><a href="#panel3">IT-Säkerhet</a></dd>

		</dl>

		<div class="tabs-content">
		  <div class="content active" id="panel1">
			<p>This is the first panel of the basic tab example. This is the first
			panel of the basic tab example.</p>
		  </div>

		  <div class="content" id="panel2">
			<p>This is the second panel of the basic tab example. This is the
			second panel of the basic tab example.</p>
		  </div>

		  <div class="content" id="panel3">
			<p>This is the third panel of the basic tab example. This is the third
			panel of the basic tab example.</p>
		  </div>

		</div>
	  </div>

	<dl class="accordion show-for-small" data-accordion>
	  <ul class="small-block-grid-1 medium-block-grid-3">
		<li>
		  <dd>
			<a href="#panel1c">Accordion 1</a>
			<div id="panel1c" class="content">
			  Panel 1. Lorem ipsum dolor
			</div>
		  </dd>
		  <dd>
			<a href="#panel2c">Accordion 2</a>
			<div id="panel2c" class="content">
			  Panel 2. Lorem ipsum dolor
			</div>
		  </dd>
		  <dd>
			<a href="#panel3c">Accordion 3</a>
			<div id="panel3c" class="content">
			  Panel 3. Lorem ipsum dolor
			</div>
		  </dd>
		</li>
		  </dd>
		</li>
	  </ul>
	</dl>
	
	</div>
	
	</section>

tabaccordion

Hello, in the code below. How can I change the breakpoint to 53 em? Before it switches to accordion view for smartphones. My topnav break at 53 so I would want this below to break aswell.

Where do I specify this in the foundation.css or how can I override it in my style.css?

Many thanks in advance.

<section class="center-menu">
    <div class="center-menu-container">
	  <div class="hide-for-small">
		<dl class="tabs" data-tab="">
		  <dd class="active" id="#panel1dd" ><a href="#panel1">IT</a></dd>

		  <dd id="#panel2dd"><a href="#panel2">Telefoni</a></dd>

		  <dd id="#panel3dd"><a href="#panel3">IT-Säkerhet</a></dd>

		</dl>

		<div class="tabs-content">
		  <div class="content active" id="panel1">
			<p>This is the first panel of the basic tab example. This is the first
			panel of the basic tab example.</p>
		  </div>

		  <div class="content" id="panel2">
			<p>This is the second panel of the basic tab example. This is the
			second panel of the basic tab example.</p>
		  </div>

		  <div class="content" id="panel3">
			<p>This is the third panel of the basic tab example. This is the third
			panel of the basic tab example.</p>
		  </div>

		</div>
	  </div>

	<dl class="accordion show-for-small" data-accordion>
	  <ul class="small-block-grid-1 medium-block-grid-3">
		<li>
		  <dd>
			<a href="#panel1c">Accordion 1</a>
			<div id="panel1c" class="content">
			  Panel 1. Lorem ipsum dolor
			</div>
		  </dd>
		  <dd>
			<a href="#panel2c">Accordion 2</a>
			<div id="panel2c" class="content">
			  Panel 2. Lorem ipsum dolor
			</div>
		  </dd>
		  <dd>
			<a href="#panel3c">Accordion 3</a>
			<div id="panel3c" class="content">
			  Panel 3. Lorem ipsum dolor
			</div>
		  </dd>
		</li>
		  </dd>
		</li>
	  </ul>
	</dl>
	
	</div>
	
	</section>
Steve Trask over 5 years ago

Hi Martin

I am presuming this is foundation 4? where the tabs changed to an accordion, this was handled from breaking from the large to the small view so it you do it at 53em it will affect the layout also.

Again presuming you are working in the css version and you want it to break at 53 em you need to change the css on the query on line263:

@media only screen and (min-width: 53em) {

This should make your site better if you want the break point there, I am going on a few presumptions.

Hope this helps

Steve