Forum

Thread tagged as: Question, Problem, Events

Using Calendar and Zurb Foundation for responsive placement on a page

Perch: 2.8.34 calendar, quill Has anyone used the Calendar app with a responsive zurb foundation setup? If I look at the example pages the Calendar is responsive, but I need to put it in a cell within zurb foundation and that make it unresponsive. Example here https:// worldofbounceparty .com/ test10.php has the calendar in a large-8 column. Looks fine in large but on smaller smartphones, you can not see Friday or Saturday.

In the file https:// worldofbounceparty .com/ events/base-calendar.php , the calendar works fine and is responsive. What did I leave out or add to the test10.php file to make it not work. Tried to include the working page into the "grid space" but that would not work.

Any suggestions most appreciated.
Carol Swinehart

Carol Swinehart 0 points

  • 4 years ago
Drew McLellan

Drew McLellan 2638 points
Perch Support

4 years ago

That sounds more like a front-end question than Perch. Perhaps someone else will chip in.
Joel Davies

Joel Davies 0 points

4 years ago

You've got a parent <div> with class="row columns" which tells Foundation that it's a 12-col div, but it's containing a child div with class="small-12 medium-12 large-8 columns centered".

<div class="row columns" style="background-color:#5dc802;">
    <div class="small-12 medium-12 large-8 columns centered">

Try removing the "columns" from the parent "row".

<div class="row" style="background-color:#5dc802;">
    <div class="small-12 medium-12 large-8 columns centered">

You'll also have to use media queries to adjust the size of your calendar text down and the padding around it as the viewport gets narrower; you table needs to be able to shrink too.

Kind of a challenge to get a 7 column table to display readably in 320px!