Google font shortcode

artline_projects · January 2015

We wonder if there is a way for this shortcode to behave responsively in sections? If we use a large font size, say, 98 in some sections on a page, texts do not scale down on mobile phones. But if we use a google font shortcode to create a layer in a slider revolution slide it does scale down and displays perfect.

Albert · January 2015

So please send us url to page where you use this shortcode and it does not scale so we can have a look on it.

artline_projects · January 2015

The site is not public yet.
Here is a screenshot: http://snag.gy/R48bZ.jpg
It behaves the same on mobile.
And as you see a fancy heading is not scaled down as well (blue text with a shadow effect).

Albert · January 2015

So if you don't have a link to website, then the only thing we can give you is below css:

.google_font { break-word: word-wrap; }

artline_projects · January 2015

Please, inform what difference does it make to have a link to a site. If you think that a screenshot (which is quite informative) is not enough we can consider giving you an access to the backend to find a solution.

Albert · January 2015

The difference is because we have no idea how looks like the code, what you did (maybe you got some errors inside) or maybe something else happened. And this is the main difference why we need link. It's like you want to know why you are sick but you won't go to the doctor yourself

artline_projects · January 2015

Ok, the code is yours, accually, we have not made any modifications.
Anyway, my doctor, tell me how do you need a link? Should it be an access to a backend or we can just switch off an under consruction page for a certain time period and send a direct link to the page in question?

artline_projects · January 2015

http://seabas.ecointeg.ru/
Please, try this link.

Albert · January 2015

Just link is fine

But it depends on you if you want to send us access on pm so we can have a look on it or maybe you will deactivate under construction and will be fine as well. It depends on you. If you don't like to show this page to anyone else, then just send is private message with access.

artline_projects · January 2015

The link I have sent in previous post should now work. Please, let me know if it does not.

Albert · January 2015

Ok. Now it works. So in this case, you must use the same css and we gave you above:

.header_section_laminal .fancy_heading .title { word-wrap: break-word; }
.google_font { word-wrap: break-word; }

artline_projects · January 2015

Actually, this method does not scale down the text. It wraps it. But as you may see at the slider with video background on top of the page the text scales to fit the screen on mobile phones. It looks like it uses the actual pixels of the device and is displayed accordingly.

Albert · January 2015

So if you want to scale texts on different devices, then you must play with css as below:

@media only screen and (max-width: 479px) { .google_font { font-size: 10px; } }

Google font shortcode

Comments