Jump to content

How to resize a Vertical Flex-box Accordion to fit mobile screen

Recommended Posts

Hello everybody,

Hoping someone can help way out of there depth for a complete newbie- trying to set up this flex-box accordion as a menu - (not got to making them clickable yet) But the mobil version doesn't display the full code block  - Please help

 

<ul class="codepen">
  <li>
    <div class="section-title">
      <h2>About Us</h2>
      
    </div>
    <div class="section-content">
      <p>Who, What, Where, <br>
        When and How.</p>
     </div>
  </li>
  <li class="active">
    <div class="section-title">
      <h2>Eat</h2>
    </div>
    <div class="section-content">
      <p>Locally sourced <br>
        ingredients, <br>prepared with <br>
        everyone <br>
        in mind. </p>
    </div>
  </li>
  <li>
    <div class="section-title">
      <h2>Hire</h2>
    </div>
    <div class="section-content">
     <p>Fully catered venue 
       available for private hire</p> </div>
  </li>
   <li>
    <div class="section-title">
      <h2>Contact</h2>
    </div>
    <div class="section-content">
     <p>Feel free to reach out<br>
       to us anytime!</p> </div>
  </li>
 
</ul>
<style>
  ul.codepen {
   background: #ffff99;
  display: flex;
  min-height: 100vh;
  max-height: 100vh;
    transform: skewX(10deg);
        transform-origin: center;
  margin: 20;
  padding: 0;
  overflow: hidden;
  list-style-type: none;
}

 ul.codepen li {
  flex: 0;
  display: flex;
  align-items: stretch;
  padding: 10px;
  background: #ffcc33;
  cursor: pointer;
  transition: all 0.5s ease;
   colour: #cc99ff;
}
 ul.codepen li:hover {
   
  background: #cc99ff;
   colour: #663399;
}
 ul.codepen li.active {
  flex: 8;
     padding: 10px;
   display: flex;
   align-items: stretch;
   font-family: 'degular display';
  background: #663399;
   transform: skewX(-10deg);
        transform-origin: center;
  cursor: default;
}
 ul.codepen li.active h2 {
   font-family: 'script';
  color: #ffff99;
}
 ul.codepen li.active .section-content {
  flex: 0.8;
  opacity: 1;
    padding: 10px;
   font-family: 'degular text';
  color: #ffff99;
}
 ul.codepen li .section-title {
  flex: 0.6;
  display: flex;
    transform: rotate(-90deg);
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 10;
  font-family: 'script';
  text-align: center;
  color: #663399;
}
 ul.codepen li .section-title h2 {
  margin: 0;
  
  white-space: nowrap;
   color: #ccc99ff;;
   
}
 ul.codepen li .section-content {
  flex: 0.8;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition: all 0.25s 0.1s ease-out;
   
}

 
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var section = $('li');

function toggleAccordion() {
  section.removeClass('active');
  $(this).addClass('active');
}

section.on('click', toggleAccordion);
</script>

 

Edited by BrainStormme
Link to comment
  • BrainStormme changed the title to How to resize a Vertical Flex-box Accordion to fit mobile screen
  • Replies 1
  • Views 446
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.