WordPress Code Tips

Just a few CSS & Code hacks to improve your WordPress website.


In my time building and developing WordPress websites, I have found myself utilizing some tips / tricks of the trade. Tips that will help you improve the reliability, speed, or even the design quality of your website. 

Show / Hide CSS Classes for Mobile / Desktop

Problem : I set up some images within a WordPress site utilizing the text-reflow. The images and texts looked great on desktop and even on my iPhone 7, but when I tested for older mobile phones, where the screen size dropped closer to 300 px the text-reflow was giving me some awkward results.

Solution : I created to css div classes, one to hide when displayed on mobile, and one to display only on mobile. 

.mobileHide { display: inline; }

/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileHide { display: none;}
}

.mobileShow {display: none;}

/* Smartphone Portrait and Landscape */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
.mobileShow {display: inline;}
}

Finally on the post/page for WordPress I inserted two images, one set-up for mobile only devices and one for desktop or tablet devices.