Support Forums

Support Offline : Mon - Fri / 10am - 6pm (GMT +6)

Your Time: Our Time:

Template not working on mobile devices

Featured Lock Resolved Bug
It would seem that the template Strings, that I have purchased is not working on mobile devices. Once you run it on a mobile device, it will cut off words that are too long. Typically H1 and H2 headers, so that you cannot see it.

That make the templete quite useles, and I hope you have a suggestion for waht to do.

7 Answers

pepperstreet

More than a month ago #Permalink
Hello Claus, can you give some more details, please? For instance screenshots or at least sample page URLs and headings. Would be easier to test and talk about the same locations and elements. BTW, does the official demo page have the same issues?

Which devices and browsers did you test on?

clausbeelen

More than a month ago #Permalink
Sorry for my lack of detailes.

The problem goes for all text, if the text is too big, then it does not adjust the size of it..
The text will simply be cut and not show, and there will be no scrollbars so you cannot even see it.

Yes you can reproduce it on your Demo page
1) Make screensize mobile device
2) Zoom to 200%
-> Reproduced

However because I have a longer word in the H1 tag, I reproduce the error without Zoom

pepperstreet

More than a month ago #Permalink
...because I have a longer word in the H1 tag


Hello Claus, I can't really recreate the issue. It's also hard to tell what a "longer word" means...
The term is quite relative, isn't it. How many characters do you have? Any special wording or language?

As far as I can see, the text wrapping behavior is pretty normal. The size of headings and empty-space is a rough and general suggestion. I mean, it might be necessary to adjust size, padding and margins to your liking or to match specific device/screen widths.
(requires media-queries in your custom.css)

clausbeelen

More than a month ago #Permalink
For me it is quite simple, it should resize it to fit, it does not matter how long it would be.. But you can take a look at my webpage if you like: http://sangstjerne.nu

pepperstreet

More than a month ago #Permalink
...it should resize it to fit, it does not matter how long it would be...


Unfortunately, it is not that simple. Actually, there is no automatic resize-to-fit.

Except for a CSS solution with viewport units.
Related Discussion and possible solution
Older Javascript alternative for "1-word" headlines. You might see, Paragraphs do not make much sense, because small screen might get a tiny, unreadable result.

BTW, you might notice that you already have some size adjustments, if you narrow down the browser-window. This is achieved through media queries in the template.css file! If you open or inspect the file, you should find rule blocks, beginning with "@media ..." Followed by the screen size min max limits in pixels.
That's what I mentioned in my first comment. If you need specific sizes or more fine-grained responsive behavior, you would have to modify or add your own custom sizes there.
Headsup: If you don't see your changes, you might have used px sizes in Pagebuilder Addons and sections. Those styles apply to a specific #section ID, and might override anything what comes after... so, an "!important" or more specific rule including your #section ID is necessary.

clausbeelen

More than a month ago #Permalink
My point is just.
You are selling and releasing templates that have bugs, and you tell me now that it is not so simple to fix it..

Not my problem.. If it has bugs, you should write that to customers, so they can see that before purchasing.

pepperstreet

More than a month ago #Permalink
You are selling and releasing templates that have bugs, ...

I don't sell anything – I am just a customer, like you are. ;-)
Actually, there is no bug.

and you tell me now that it is not so simple to fix it...


There is nothing to "fix". It is the way the current web and CSS works.
I gave some additional tricks and articles about some techniques. Which can be an option, but are not applicable for all users and sites. Browser compatibility is another question. As always: It depends on many factors.

As I mentioned earlier, the template.css already supplies some breakpoints and different sizes. You should see the effect on browser window resize.

The default behavior and current sizes are a general suggestion. If you need specific sizes, you need to write some custom CSS.


There are no replies made for this post yet.
Be one of the first to reply to this post!

Leaderboard (30 days)

Paul Frankowski

Paul Frankowski

Total Accepted Answers: 129
Sifat

Sifat

Total Accepted Answers: 81
Toufiq

Toufiq

Total Accepted Answers: 66
Pavel

Pavel

Total Accepted Answers: 6
Rifat Wahid Alif

Rifat Wahid Alif

Total Accepted Answers: 5

114

Templates

293325

Community Users

Newsletter

Don’t miss any updates of our new templates and extensions and all the astonishing offers we bring for you.
We never spam

Joomla! ® name is used under a limited license from Open Source Matters in the United States and other countries. JoomShaper.com is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.

Connect Us