The Joomla Training Cohort has been launched!

Please send any feedback or bug reports to  

@media Query CSS Basics are just what you need to overcome that sinking feeling after you are starting to master the design your website for desktops and realize it needs to be fixed for mobile devices and other screen widths. In this video we'll look at the very basics of @media Query CSS and how you can easily customize the look of your website on different devices and screen widths.



  • Title: "(1) @media Query CSS Basics for Joomla - 👀 WMW 104 - YouTube"
    - Presenter: Tim Davis
    - Video is about media query basics for CSS and how to make websites responsive on different devices.
    - Tim mentions that he has always focused on desktop templates but now wants to fine-tune the CSS for mobile devices using media queries.
    - He introduces the concept of media queries in CSS, explaining that they apply CSS properties based on certain conditions (e.g., screen width).
    - Tim demonstrates how to use media queries in Joomla templates.
    - He explains that different templates may have different methods for adding custom CSS.
    - Tim uses Chrome Dev Tools to inspect and modify CSS for specific screen widths.
    - He demonstrates how to add custom CSS for specific devices and screen sizes.
    - Tim also shows how to use the "!important" rule to override conflicting CSS.
    - He gives an example of modifying the size of an image for mobile devices by adding a CSS class.
    - Tim explains how to use the "element inspector" to edit CSS for specific elements.
    - He emphasizes the importance of organizing CSS within media query brackets for specific conditions.
    - Tim shows how the changes in CSS affect the website's appearance on different devices.
    - He concludes the video by highlighting how media queries can make websites more responsive.

Watch Me Work Livestreams 104SUBSCRIBE TODAY! ►

😴👌Watch Me Work live streams ►    • Find and Replace ...  

Here are some of the links mentioned in this Live Stream - and some others:

Contact Tim Davis ► This email address is being protected from spambots. You need JavaScript enabled to view it.

Joomla Training Cohort ► ►

MigrateMe 4 ►

Stageit for Joomla ►    • First Look at Sta...  

Backing Up Your Joomla Site with Akeeba ►    • How to Backup a J...  

Better Frontend Link ►

FOLLOW US ON TWITTER! ► @basicjoomla


Interesting blog? Like it on Facebook, Post it or share this article on other bookmarking websites.

Written by:
Tim Davis is the founder and owner of Cybersalt.
Log in to comment

Add comment