603-924-9867- Suggested to use AMP plugin. I don’t really understand what this is…need more research, Melinda?
- Test on mobile devices
Look at site in Chrome
Press F12 key which will take you to Dev Tools
Select the toggle device icon (small squares)
You’ll see options to select various devices at the top of the website display
On the right you can view errors and messages - See https://www.peeayecreative.com/how-to-change-the-divi-menu-module-responsive-breakpoint/ for more detail
/*change breakpoint of responsive menu*/
@media (max-width: 1024px) {
#et_mobile_nav_menu {
display: block;
}
#top-menu {
display: none;
}
}
/*end*/ - See https://www.peeayecreative.com/how-to-change-the-divi-menu-module-responsive-breakpoint/ for more detail
/*change breakpoint of responsive menu*/
@media only screen and ( max-width: 1068px ) {
#et_mobile_nav_menu {
display: block;
}
#top-menu-nav, #top-menu {
display: none;
}
.dt-section {
display: none;
}
}
/*end*/ - Best fonts for mobile
Best font for mobile view? Calibri, Tahoma, Lato, Roboto -
Use em
One of the best practices to make the responsive text on the web is to use relative units like
remandem. From the type scale that we have defined, we can see the size inemon the right side of itspxunit.The
emis a unit which equals to currently specified font-size. Using this in CSS property means its value is relative to the font-size of the element. Using2emmeans 2 times the size of the current font.Example css
@media all and (max-width: 767px) {
p,ul {
font-size: 12px;
line-height: 1.8em;
color: #000000;
text-align: left;
font-weight: bold;}
.text-mobile p,ul {
font-size: 10px;
line-height: 1.8em;
color: #c9c9c9;
text-align: left;
font-weight: normal;}
