FullCalendar.js adjust header for mobile - javascript

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

This worked for me with the newest version. Check done using screen width.
#media (max-width: 768px){
.fc-toolbar .fc-left, .fc-toolbar .fc-center, .fc-toolbar .fc-right {
display: inline-block;
float: none !important;
}
}

For Fullcalendar v5
#media (max-width: 767.98px) {
.fc .fc-toolbar.fc-header-toolbar {
display: block;
text-align: center;
}
.fc-header-toolbar .fc-toolbar-chunk {
display: block;
}
}

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;
}

The version I am working with uses flexbox. This is what works for me,
.fc-toolbar {
.fc-center h2 {
font-size: 1.25em
}
display: block;
text-align: center;
#media (min-width: 600px) {
display: flex;
}
}

Related

Top level media queries with styled-components?

I'm currently in the process of migrating from plain scss/sass to styled-components in my react site in progress!
However, I was wondering if there's any way to add top-level media queries (if that's the right way to describe them). Here's what I'm talking about:
/* Large screens */
#media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 5rem;
height: 100vh;
&:hover {
width: 16rem;
.link-text {
display: inline;
}
.logo svg {
margin-left: 11rem;
}
.logo-text {
left: 0px;
}
}
}
}
As far as I can tell, I would need to add media queries inside each styled-component component with the styles that I would want to change. However, I feel that having queries like this would be more organized.
Is there any way to get media queries like this using styled-components? Any help would be massively appreciated!
I usually create a global style for media. There I put my top level media queries.
import { createGlobalStyle } from "styled-components";
export default createGlobalStyle`
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
#media(max-width: 800px) {
flex-direction: column;
position: relative;
}
`;

responsive layout on React application

the task is to show different components based on the device width;
I've come up with two variants:
write a React Component which will take several components, on each width (sm, md, xl). It'll automatically check the device width and render only one component based on the width. (example)
<DeviceChecker>
<Desktop>
<List/>
</Desktop>
<Mobile>
<Carousel/>
</Mobile>
</DeviceChecker>
What I don't like in this approach is checking the width on window resize event.
Write both components in React but using CSS media queries show or hide each, like this:
<div>
<Carousel className="sm" />
<List className="md" />
</div>
what I don't like in this case is that React will actually render both components but one of them will be simple hidden
I know how to implement both variants, but the question is Which one is correct way to write Responsive Layouts for React Applications?
#media only screen and (min-width: 768px) {
section.dashboard .slick-list .slick-track {
display: flex;
}
section.dashboard .slick-list .slide {
opacity: 1;
}
header .wrapper .article h1 span.arrow {
display:none;
}
header .wrapper .article .description {
max-height: 300px
}
}
#media only screen and (min-width: 1024px) {
.container header .wrapper {
text-align:left;
margin-left:5%;
width:480px;
}
.container header .header-nav-area #nav_container {
display:flex;
}
.container header form {
display:block;
}
.container header .menu-icon {
display:none;
}
header .wrapper .article footer {
display: block;
}
section.dashboard .slick-list .slick-track {
display: flex;
min-width: 309px;
padding: 20px;
}
section.dashboard .slick-list .slick-track[index="2"] {
display: flex;
}
section.dashboard .slick-list .slide {
opacity: 1;
}
}
For more detail visit;
https://itnext.io/3-ways-to-implement-responsive-design-in-your-react-app-bcb6ee7eb424

Make Element Appear On Minimum Screen Size

I have a bug in my header when I shrink the screen size down. The nav is supposed to disappear (only to reappear if the mobile nav icon is clicked,) which is working fine. However, if I click the mobile nav icon, and then click it again to hide it, the nav stays hidden even when I expand the screen size out again.
I want the nav to show up again when the screen gets to 670px.
CSS
#media screen and (min-width: 671px) {
.nav {
display: block;
}
}
#media screen and (max-width: 670px) {
.navicon {
display: block;
}
.homeiconcontainers {
float: none;
width: 100%;
}
.header {
background: none;
opacity: 1;
}
.pagelinkcontainers {
float: none;
line-height: 50px;
background-color: black;
width: 200px;
padding-right: 0px;
text-align: center;
}
ul {
padding-left: 20px;
}
.nav {
display: none;
}
}
JavaScript
// Show Mobile Navbar Onclick
function MobileMenu (object) {
var elements={"nav":{title: "nav"}};
var mobiledisplay = window.getComputedStyle(document.getElementById("nav")).display;
//Show nav element
for(var nav in elements) {
if(object!==nav) {
document.getElementById(nav).style.display='none';
}
if(object==nav && mobiledisplay=='block') {
document.getElementById(nav).style.display='none';
}
else {
document.getElementById(nav).style.display='block';
location.hash=pages[nav].title;
document.title=pages[nav].title;
}
}
}
My .nav is somehow getting display: none from either my 670px media query, or from the javascript function. I could also be mis-using the min-width media query, but I'm not sure.
Im assuming you don't need to see my HTML to figure this out, but if you would like to, let me know.
Now CSS takes precedence over the JavaScript inline styling forcing the nav bar to be visible.
#media screen and (min-width: 671px) {
.nav {
display: block !important;
}
Why?
JavaScript code setting inline styling wins from CSS styling. Or better said always takes priority to CSS rules except when that CSS rule has !important.

Text not showing in mobile view

I was working on this site.Please check the link http://mrsinghcafe.com/real/
It has a slider on home page with text.In small resolutions the slider appears but without Text
I want text also to appear on small resolutions.
I tried adding the following to my css
#slidecaption
{
display:block;
}
.slide_text
{
display:block;
}
but didn't help.Can some one please help me .Thanks.!!
The display:none; of the #div1content is responsible here:
#media only screen and (max-width: 767px) {
#div1content{ display:none;}
}
Remove it and position the text how you like it.
found this in your CSS:
#media only screen and (max-width: 767px) {
#slidecaption {
...
}
.slide_text {
display: none;
}
#slidecaption h2 {
...
}
}
.slide_text is display: none, and after this rule, no rule to set it to block again.
in slider_text_n_desription.css, you will find above rule. overrule it a bit down by adding display: block
#media only screen and (max-width: 479px) {
.slide_text {
bottom: 120px;
font-family: 'Eurostile-Normal';
font-size: 12px;
margin-left: 10%;
position: absolute;
display: block;
}
}
#slidecaption
{
display:block;
}
.slide_text
{
display:block;
}
use semicolones

Responsive header with a weird webkit bug

I'm currently building a new website but there is a small hiccup on webkit browsers.
http://typework.github.io/green-life/
If you browse to the url above and resize the browser to mobile size.
Open the navigation (click only once on the hamburger) and resize back to full screen. You can see that my navigation moved to the left. When you keep resizing the browser you see that it moves more and more to the left.
In Firefox I do not have this problem, Safari and Chrome does.
I used plain and simple JavaScript:
$('.menu-link').on('click', function() {
$('.nav').toggleClass('active');
return false;
});
And simple display: block css:
.nav {
display: inline-block;
float: right;
padding: 31px 0 0 0;
margin: 0;
}
#media(max-width: 992px) {
.nav {
position: relative;
margin: 0;
padding: 0;
display: none;
clear: both;
width: 100 %;
}
.nav.active {
display: block;
}
I do not seem to find the bug however. Any ideas?
I think there is a problem in the nav li, change it display:inline-block.
.nav li {
display: inline-block;
padding-left: 30px;
text-align: right;
}
I think this will solve your issue.
also make it display block in media query

Categories