Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Projcet Name not proper in responsive #11053

Closed
kalpeshtailored opened this issue Jul 8, 2016 · 9 comments
Closed

Projcet Name not proper in responsive #11053

kalpeshtailored opened this issue Jul 8, 2016 · 9 comments

Comments

@kalpeshtailored
Copy link

kalpeshtailored commented Jul 8, 2016

Steps to reproduce the issue

Enter project name having 13 to 15 characters (ex. JoomlaCMSStaging).
Check the site in responsive view
The project name is going out of the div.

Expected result

It should be in div.

Actual result

Going out of the div.

System information (as much as possible)

screen shot 2016-07-08 at 07 48 21Joomla! 3.6.0-rc — © 2016 joomlacmsstaging

Additional comments

@killoltailored
Copy link

I have tested this issue in front-end successfully.
Found in responsive viewscreen shot 2016-07-08 at 08 01 58


This comment was created with the J!Tracker Application at issues.joomla.org/joomla-cms/11053.

@ghost
Copy link

ghost commented Jul 8, 2016

I think this is the normal and the expected bahavior when your site name is a long and single word.
Use "Joomla CMS Staging" instead or lower the font-size via CSS or use a hyphenator...

Somehow related: #8575 (comment)

@brianteeman
Copy link
Contributor

Font sizes do not dynamically resize like images :(

The one thing we could do is to add css to force the text to wrap http://caniuse.com/#search=word-break

@ghost
Copy link

ghost commented Jul 9, 2016

http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_word-break

word-break: break-all;

The word will break at any character.

joomlacmsst
aging
joomlatittlet
es
Joomla CM
S Staging

I would prefer if users would ask in a forum when they really need a solution for this problem instead of coding the above behavior into core.
There are several possible solutions: via CSS, media queries, hyphenators, manipulating font-size via JS, width-height-calculation. But none of them is a good "universal one" I think.

@brianteeman
Copy link
Contributor

Agreed

@brianteeman
Copy link
Contributor

Closing as it isn't something we can really control at a system level

@ggppdk
Copy link
Contributor

ggppdk commented Jul 9, 2016

@bertmert
@brianteeman

please leave this open, it does not need to be closed,

because there are good solutions that are also (browser) safe enough,
and this is an opportunity to make more use of them

  • protostar is already using them, and i mean using 'vw' view port (ok, calc() is not used yet)
  • they are also valid for the LESS compiler version currently included and as said above are browser-safe (enough)
.site-title
{
    font-size: 40px;
    font-size: calc(16px + 1vw);
}

The above

  • works in all browsers and in in IE9+, and is safe for IE8
  • browsers that do not support the 2nd font-size definition that uses calc(), will still use the 1st definition

also this is opportunity to use the above in other titles too like module titles, etc

@brianteeman
Copy link
Contributor

If you have a PR then submit it. No need to re-open

On 9 July 2016 at 09:24, Georgios Papadakis notifications@github.com
wrote:

@bertmert https://github.com/bertmert
@brianteeman https://github.com/brianteeman

please leave this open, it does not need to be closed,

because there are good solutions that are also browser safe,
and this is an opportunity to make more use of them

  • protostar is already using them, and i mean using 'vw' view port
    (ok, calc() is not used yet)
  • they are also valid for the LESS compiler version currently included
    and as said above are browser-safe (enough)

.site-title
{
font-size: 40px;
font-size: calc(16px + 1vw);
}

The above

  • works in all browsers and in in IE9+, and is safe for IE8
  • browsers that do not support the 2nd font-size definition that uses
    calc(), will still use the 1st definition

also this is opportunity to use the above in other titles too like module
titles, etc


You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
#11053 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/ABPH8Te5yiG9rmd6tGqeZC4WlXv9jv0oks5qT1qpgaJpZM4JIAB9
.

Brian Teeman
Co-founder Joomla! and OpenSourceMatters Inc.
http://brian.teeman.net/

@ggppdk
Copy link
Contributor

ggppdk commented Jul 9, 2016

agreed, will do in good time,

(will do later and not now, as i would like to search and include more cases into the PR)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants