Tabs do not reproduce on front page

I simply recreated everything with the same settings as your QuickStart has. But when the screen size is not huge, the text will overlap - it doesn't scale, nor does it moves away from tabs, from buttons.
Here's the screenshot from my laptop view:
https://yadi.sk/i/1sWRPslVf7dWp
https://yadi.sk/i/TNAxC5Chf7dfs

and from mobile view:
https://yadi.sk/i/3EJ03B9nf7dji Here we see text move away from buttons-tabs, but overlaps with itself.

How do I get it fixed? The site is set to go live in two hours and not so many people visit it from huge TV screens... )))

http://v-boge.org/

Hi

That's because font is too big. Try add this code to tablet.css and mobile.css with respectively reduced value, so font will be smaller in this devices:

Code: Select all

.gk-big-heading {
font-size: 150px;
}


That's because font is too big.

That's not that. Here's how it looks with 150px: https://yadi.sk/i/SHU3d-LSf9KXB
You can see - I just put 150px in FireBug: https://yadi.sk/i/kTpq02aPf9KeG

But the lines of words are overlapping with each other and tabs on the left.

Hi

I meant to show how it works. Some elements needs to be adjusted according to screen size, so adding code to template.css than to mobile.css and so on.

Unfortuntely this tabs style was designed for one purpose only and is not flexible to show all kind of content. I agree, it's not our best idea

For example I would adjust it this way:

add this code to small.desktop.css

Code: Select all

.box.very-big-spaces {
    padding: 240px 0 240px 275px !important;
}

.gk-big-heading {
    font-size: 120px;
    line-height: 105px;
}


than in tablet.css I would remove the padding:

Code: Select all

.box.very-big-spaces {
    padding-left: 0 !important;
}