The Joomla Training Cohort has been launched!

Please send any feedback or bug reports to tim@cybersalt.com (opens new link)  

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 ► This email address is being protected from spambots. You need JavaScript enabled to view it.

Joomla Training Cohort ► https://cybersalt.com/jtc

JTC has been launched and is now accepting members https://cybersalt.com/services/subscriptions
mySites.guru ► https://mysites.guru
Backing Up Your Joomla Site with Akeeba ►https://www.youtube.com/watch?v=4Xu4o0g2-RY&t=0s
FOLLOW US ON X(TWITTER!) ► https://x.com/basicjoomla
LIKE US ON FACEBOOK! ► https://www.facebook.com/basicjoomla
SUBSCRIBE US ON YOUTUBE ►//www.youtube.com/@Basicjoomla

#basicjoomla

#cybersalt

Monday Maintenance 234


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

Submit