To help keep your Joomla site mobile compatible, make sure long text and urls wrap on your pages. In this video we'll show you the css code you need word-wrap those long urls and text.
00:00 - Introduction to the CSS rule for mobile compatibility
00:28 - Introduction to Tim Davis and his Joomla services
00:59 - Explanation of the problem with long URLs and text on mobile view
01:38 - Demonstration of the issue in Joomla 4 site using Chrome Dev Tools
02:08 - Adding custom CSS to fix the wrapping issue in the Cassiopeia template
02:45 - Testing and demonstrating the fixed mobile-friendly page
End - Conclusion and subscription encouragement
SUMMARY
Introduction to the CSS rule for mobile compatibility:
Tim Davis introduces the topic of ensuring mobile compatibility with Joomla sites using CSS.
Introduction to Tim Davis and his Joomla services:
Tim Davis explains his role in providing Joomla tutorials and services.
Invites viewers to contact him for Joomla-related assistance.
Explanation of the problem with long URLs and text on mobile view:
Discusses receiving a notification from Google Search Console about a page not being mobile-friendly due to long URLs and text.
Identifies the issue where long strings of text and URLs are not wrapping on mobile screens.
Demonstration of the issue in Joomla 4 site using Chrome Dev Tools:
Shows a Joomla 4 site with a page containing a long URL and text.
Uses Chrome Dev Tools to simulate mobile view and demonstrates how the content doesn't wrap correctly.
Adding custom CSS to fix the wrapping issue in the Cassiopeia template:
Guides viewers on adding custom CSS to the Cassiopeia template to fix the wrapping issue.
Navigates to the Joomla backend, specifically to the CSS file location in the Cassiopeia template.
Adds CSS code (p, a { word-wrap: break-word; }) to ensure paragraphs and links wrap properly on mobile devices.
Testing and demonstrating the fixed mobile-friendly page:
Saves the CSS file and refreshes the Joomla page to show the fixed mobile-friendly layout.
Highlights how both long URLs and text now wrap appropriately on the mobile view, making the page mobile-friendly.
Conclusion and subscription encouragement:
Concludes by summarizing the importance of ensuring mobile compatibility for Joomla sites.
Encourages viewers to subscribe for more helpful Joomla tutorials.
Please send any feedback or bug reports or queries to;
Contact Tim Davis â–º
Joomla Training Cohort â–º https://cybersalt.com/jtc
Add comment