I am using responsive styling in a project that uses the fullcalendar.js. Unfortunately, I can’t get the style of the header (fc-header-left, fc-header-center, fc-header-right) to stack on each other when in mobile view. For example… in desktop view it looks like… fc-header-left fc-header-center fc-header-right
When mobile I would like the 3 parts of the header to stack on top of each other. fc-header-left fc-header-center fc-header-right
I have tried to override these headers with negative margins, floats and all kinds of things but I can’t get these headers to stack.
Does anyone know how I can get the header parts to stack on each other in mobile view?
Thanks
Advertisement
Answer
Give each of them a width:100%; and display:block; that should do the trick.
At least I was able to get the demo one on teh fullcalendar.js website to do that.
You will then have to align them as you see fit.
.fc-header-left, fc-header-center, fc-header-right {
width: 100%;
display: block;
}