Using Inspect Element (Dev Tools) - Modern Events Calendar Knowledgebase Using Inspect Element (Dev Tools) - Modern Events Calendar Knowledgebase

Using Inspect Element (Dev Tools)

In order to customize each section of Modern Events Calendar manually, you can use the dev tools inside your browsers and then put the custom codes into the Custom CSS part in settings of MEC or your theme.


How to Customize MEC with Inspect Element (Dev Tools) and Write Custom CSS Code?

You can use Inspect Element (built-in developer tools of your browser) and change each section for yourself:

If you want to make changes to your design then you can use Inspect Element (dev tools) to see the source code of your website and the CSS rules applied to it.

To access it, right click and from the pop-up menu select Inspect Element (or Inspect or Dev Tools).

For more details you can visit Chrome inspect element or Firefox inspect element. Meanwhile searching on google for it will be helpful.

For example, we try to change bottom gray border color in a footer. You can watch the tutorial video here.

Here are some CSS tutorials that will help you write your own customized CSS codes: w3schools | CSS Units

Media Queries for All Devices

You can use “media query” for make your design more responsive on mobile and tablet devices. Click here or here for more information in CSS media quires.

You can apply your CSS on custom screen size using the following example:

@media only screen and (max-width: 480px) {

or use between two screen sizes:

@media (max-width: 960px) and (min-width: 481px){

Note: If you want to make sure that all your customizations are only being used in the Single Event Page you need to use body classes like the following ones (check the below screenshot):

single-mec-events or mec-single-fluent-body  

Report Out Dated Content

If you think lorem ipsum then dolor site amet never

Report Now

Avatar for Doris Cooper
Avatar for Doris Cooper
Avatar for Doris Cooper
Anna June 15, 2020
| |

Hello! I want to disable header and footer on pages of single events, or maybe change the default template of these pages. My theme doesn’t provide this opportunity. How can I do it? Thanks!