Start a new topic
Answered

What Is Inspect Element And How To Use It?

How can I use Inspect Element to customize MEC?!


Best Answer

You can use Inspect element and change each section for yourself. For more information, please read the following article.


Inspect element

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


To enable it right click and from the pop-up menu select Inspect Element


For more details please 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:

youtu.be/MWUP8uOLoaQ
CSS Tutorial: w3schools | CSS Units

Media Queries for All Devices

You can use “media query” for responsive mobile and tablet
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp


Put your CSS on custom screen size:

@media only screen and (max-width: 480px) {
    /* PUT YOUR CSS CODE */
}


or use between sizes:

@media (max-width: 960px) and (min-width: 481px){
    /* PUT YOUR CSS CODE */
}


Resource link: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

— Important 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 this screenshot

1 Comment

Answer

You can use Inspect element and change each section for yourself. For more information, please read the following article.


Inspect element

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


To enable it right click and from the pop-up menu select Inspect Element


For more details please 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:

youtu.be/MWUP8uOLoaQ
CSS Tutorial: w3schools | CSS Units

Media Queries for All Devices

You can use “media query” for responsive mobile and tablet
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp


Put your CSS on custom screen size:

@media only screen and (max-width: 480px) {
    /* PUT YOUR CSS CODE */
}


or use between sizes:

@media (max-width: 960px) and (min-width: 481px){
    /* PUT YOUR CSS CODE */
}


Resource link: https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

— Important 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 this screenshot

Login or Signup to post a comment