I configured Fullcalendar on my project, but I notice that on mobile, there is a problem with the layout of the buttons of the header, which is not at all aesthetic
FullCalendar on PC :
FullCalendar on mobile :
Is there anything to do to make it more aesthetic?
This Fullcalender is not responsive so we have to make header forcefully responsive. Add below code in your ngOnInit() function.
document.querySelector('style').textContent += "#media screen and (max-width:767px) { .fc-toolbar.fc-header-toolbar {flex-direction:column;} .fc-toolbar-chunk { display: table-row; text-align:center; padding:5px 0; } }";
I found a super simple solution that seems to work well and is just simple CSS:
#media screen and (max-width:767px) { .fc-toolbar.fc-header-toolbar {font-size: 60%}}
Related
I'm trying to toggle my mobile menu at 1172px as the default is 850px but it's not working.
My web is: www.maria-educandoconamor.com
I'm current using the following css to achieve it:
#media only screen and (max-width: 1172px) {
.header-nav, .header-nav-main, .nav-line-grow, .nav-size-small, .nav-spacing-medium, .nav-uppercase {
display: none !important;
}
.mobile-nav, .nav.nav-left {
display: flex !important;
}
}
But unfortunately it's not working.
Does somebody know what I'm doing wrong?
Thanks.
my website's main menu responsive breakpoint is at the 850px for mobile menu. Though I want to change it to a mobile menu from 1369px, as the desktop main menu after 1369px overflow the site content. I have tried CSS such as:
#media only screen and (max-width: 1369px) {
.header-nav.header-nav-main.nav.nav-left.nav-line-grow.nav-size-small.nav-spacing-medium.nav-uppercase {
display: none;
}
.mobile-nav.nav.nav-left {
display: block; !important:
}
}
Thus it only hides desktop menu but no hamburger menu appears...
Could somebody advise me how to change this breakpoint correctly? p.s. I am an amateur beginner in web development.
Thank you in advance.
you may add another breakpoint to your css file easily by adding #media :
#media only screen and (max-width: 1369px) {
.header-nav, .header-nav-main, .nav, .nav-left, .nav-line-grow, .nav-size-small, .nav-spacing-medium, .nav-uppercase {
display: none;
}
.mobile-nav, .nav.nav-left {
display: block; !important:
}
}
I am using Node child theme for my site. The header and menu works fine in the desktop mode but when it is shrinked to responsive mood the heading with menu disappeares. I have tried allmost all the options but none is working. I couldn't find any documentation of the theme and any specific solution on the net. My site url is-
http://onlineinternetquest.com/
Add This code in your mobile media query
header.edgtf-mobile-header {
display: block !important;
}
header.edgtf-mobile-header .edgtf-mobile-header-inner {
height: auto;
}
You have media-query in your css that says under 1024px display: none; to head.
See screen shot from F12:
So remove this media-query:
media only screen and (max-width: 1024px)
.edgtf-page-header, .edgtf-top-bar {
display: none;
}
I installed a plug-in called Display-listings-shortcode, and added the columns-extension to allow for columns the blogs halfway down the homepage at RitaNaomi.com will be horizontally displayed on a web browser. It looked whacky at first with titles being scrunched beside and underneath the image, but eventually i figured out how to edit the .display-posts-listing class to change the display
.display-posts-listing .listing-item {padding-bottom:30;}
.listing-item
{
float:left;
width:22%;
margin: 40px
}
But when I look at it on a mobile device, they're all scrunched together as if it was still being displayed on a laptop. I want to have it listed vertically and not horizontally, because thats the way it would fit best.
I tried (and it didn't work) to use #media to change it through the css, but it didn't work.
#media handheld {
.display-posts-listing .listing-item {
clear: both;
display: block;
}
.display-posts-listing img {
float: left;
margin: 0 10px 10px 0;
}
}
You shouldn't be using #media handheld {} since it's been deprecated according to MDN.
You're better off targeting pixel-width values. You may need a couple queries, and some of the oldschool standards were 1023px, 767px. Feel free to replace the 900px below with whatever works for you.
#media only screen and ( max-width: 900px ){
.display-posts-listing .listing-item {
/* CSS Here */
}
}
Removed the custom CSS that was already added from the original theme. It was interfering with the Columns display.
Not using #media handheld {} because it was deprecated (thanks to xhynk for the response), and instead used the command (max-width: 768) , the point at which the title and image css look funky.
To make the title display on its own line on a bigger screen, i added this to my CSS:
.display-posts-listing .listing-item .title { display: block; }
And now i'm using the above media query to figure out how to style it on smaller devices.
Complete CSS: https://gist.github.com/billerickson/17149d6e77b139c868640a0ed3c73b3a
Created a responsive site in Dreamweaver CS6 using the Fluid Grid system. All break points initially worked fine, and I had 3 separate layouts for desktop, tablet, and mobile; with different resolutions, each Fluid Grid Layout Div Tag would rearrange on the page into different columns. Every div on the page is set up with width: __%; in the CSS so that they expand and contract with the browser size.
Everything is responsive on the page and works correctly; however, somewhere during development I lost the Tablet break point, in a sense. When the browser reaches the 768px width which should break the page into the Tablet layout, it instead jumps straight to the mobile formatting, which should not happen until 480px.
In Dreamweaver, I can view the formatting I have set for the Tablet layout, in Design mode it will show me the correct layout of columns of DIVs and content; however, once I place DW in Live mode, or preview in a browser, it no longer has the Tablet functionality, just Desktop and Mobile formatting.
I will post the CSS code for the #media queries and the subsequent .gridContainer code - trying to see if a solution could be found without having to post the entire CSS code, as there's quite alot. Please let me know if I need to edit my question and include more code - perhaps the truncated code of a few DIVs and their responsive values for each layout? I'd be happy to post any more information if it will help resolve this issue.
Thank you in advance for any support or advice!
CSS:
/* Mobile Layout: 480px and below. */
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
border:1px solid #00133e;
background: #004aa1;
}
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
}
}
/* Desktop Layout: 769px to a max of 1232px. Inherits styles from: Mobile Layout and Tablet Layout. */
#media only screen and (min-width: 769px) {
.gridContainer:before, .container:after {
display:table;
content:"";
zoom:1 /* ie fix */;
}
.gridContainer:after {
clear:both;
}
.gridContainer {
width: 96%;
padding-left: 1.5%;
padding-right: 1.5%;
}
}
Found the solution:
Near the end of my mobile layout CSS style code, there was an extra curly brace. Removed the brace, responsiveness returns.
Very simple solution; thanks to #MrRO for pointing me in the right direction to look!
Assuming, this is copy paste of actual code. In the given CSS, I believe you have have missed one curly braces, which was suppose to close the style for <480 width devices.
background: #004aa1;
} <-- Here one more "}" needed
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
#media only screen and (min-width: 481px) {
.gridContainer:before, .container:after {