Title overflowing on Mobile Devices

Resolved androcton
(@androcton)

11 years, 7 months ago

The title of the website overflows onto the menu when viewed/rendered on a mobile device. Of course, this happens when the title is a little too long. Not a problem for shorter titles.

Is it possible to replace the long(er) title by ellipses?
Example:
“pradeepclicks.com” can be shown as “pradeepclic….” instead of it overflowing into the menu, on mobile devices.

The link to the screenshot of the problem
http://pradeepclicks.com/myData/Screenshot_visualTheme_mobile.png

Viewing 6 replies - 1 through 6 (of 6 total)

jitendraamishra
(@mishrajitu)

11 years, 7 months ago
Hi,

You need to try this in your style.css for getting what you want:
```
.site-title a {
    padding-right: 100px;
    word-wrap: break-word;
}
```
By the way nice site.
Thread Starter androcton
(@androcton)

11 years, 7 months ago

Hi Jitendra,
First of all Thanks for the quick response. Appreciate the same.

I tried what you said, but now the text is broken and put onto a new line. Is there a value word-wrap can take which will tell it to truncate the word?

This is how it looks now….
http://pradeepclicks.com/myData/Screenshot_visualTheme_mobile-2.png

I would like to truncate the string

“Pradeepclicks.com [β]”

to

“Pradeepclick…” OR just “Pradeepclicks.c”

Regards,
Pradeep
P.S: I have absolutely no idea about the web development, CSS and such, please bear with me if the questions i raise is very trivial.
jitendraamishra
(@mishrajitu)

11 years, 7 months ago
Hi Pradeep,

You can try this for changing the font size at lower screens:
```
@media screen and (max-width: 400px){
.site-title > a {
    font-size: 17px;
}}
```
And also add a background to the mobile menu so that the text which will go behind that will not show:
```
.menu-toggle {
    background: #313131;
}
```
If you use some lengthy site title in future then you can consider using word wrap also or you can change the font-size if required.
Theme Author Devin Price
(@downstairsdev)

11 years, 7 months ago

Thanks for helping out in the forums @jitendra.

@androcton, I opened a GitHub issue for this and will attempt to find a solution for long site titles in mobile for the next release: https://github.com/devinsays/visual/issues/12

jitendraamishra
(@mishrajitu)

11 years, 7 months ago

You are most welcome @devin.

Theme Author Devin Price
(@downstairsdev)

11 years, 4 months ago

This will go out in the next release:
https://github.com/devinsays/visual/issues/12

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Title overflowing on Mobile Devices’ is closed to new replies.

Tags