Problem/Motivation

When you view a tour on a mobile device, the min-width: 500px in tour tour.module.css causes the tour tip to be larger than the display. This results in situations where the tour, and possibly access to the site, is unusable.

Steps to reproduce

View a tour using a responsive display size smaller than 500 pixels wide.

Proposed resolution

Add some additional breakpoints and styling to tour.module.css that take into account smaller mobile devices.

Remaining tasks

None.

User interface changes

Adjusts sizes of fonts and buttons for very small devices and enforces a better approach to minimum widths.

API changes

None.

Data model changes

None.

CommentFileSizeAuthor
#7 tour-after-final-tip.png146.09 KBjoshuami
#7 tour-after-second-tip.png169.39 KBjoshuami
#7 tour-after-first-tip.png147.17 KBjoshuami
#7 tour-before-final-tip.png129.28 KBjoshuami
#7 tour-before-second-tip.png156.94 KBjoshuami
#7 tour-before-first-tip.png151.02 KBjoshuami
tour-min-width-500-with-small-device-width.png101.6 KBjoshuami

Issue fork tour-3539631

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

joshuami created an issue. See original summary.

joshuami’s picture

joshuami
he/him
Primary language English
Location Portland, OR
commented

Ran across this during UAT for an upcoming launch of a new site using tour.

I don't have an immediate idea for a fix. Removing min-width: 500px results in a usable tour tip on mobile, but it looks unnaturally squished on larger displays. Ideally, we would have minimum widths based on breakpoints. Any thoughts on how many breakpoints to support?

joshuami opened merge request !107

joshuami’s picture

joshuami
he/him
Primary language English
Location Portland, OR
commented
Issue summary: View changes
Status: Active » Needs review

Here is my take on adding a bit better responsive support to the tour tip elements. At smaller breakpoints, it will never exceed the display width and the button and text sizes are adjusted a bit for better spacing on small devices down to 375 pixels wide.

This could definitely use a second set of eyes, but I created a patch from the approach that is working pretty well for me.

joshuami’s picture

joshuami
he/him
Primary language English
Location Portland, OR
commented

One more quick commit to fix the stylelint issues.

smustgrave’s picture

smustgrave commented

Mind providing screenshots?

joshuami’s picture

joshuami
he/him
Primary language English
Location Portland, OR
commented
StatusFileSize
new tour-before-first-tip.png151.02 KB
new tour-before-second-tip.png156.94 KB
new tour-before-final-tip.png129.28 KB
new tour-after-first-tip.png147.17 KB
new tour-after-second-tip.png169.39 KB
new tour-after-final-tip.png146.09 KB

Here are some screenshots that show a before an after. I've applied the patch of these changes to my blog post about the Tour module as well—if you want to see it in action: https://joshuami.com/blog/2025/tour-module/. The patch slightly alters font sizes as padding per break point for smaller devices.

Before

first tip expands past display port.
first second expands past display port.
final tip expands past display port.

After

first tip expands past display port.
second tip expands past display port.
final tip expands past display port.

smustgrave’s picture

smustgrave commented
Status: Needs review » Fixed

Awesome!

Now that this issue is closed, please review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, please credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.