Visual appearance on tablet (portrait) is absolutely strange

[dermat]

Dear support team,
the general visual appearance of this website is strange on iPad in PORTRAIT format.

the headlines are positioned centered and there are borders, that should only be visible on desktop. but now the headlines are aligned more to the left side, but without being centered really nor being left aligned. why is it not in the middle of the screen?

and with the icons boxes, there seem to be a bug, like the text can run out of the solid to the right if the words are too long an besides, i don‘t understand, why the boxes aren‘t using the whole width, when there are no limitation through blank spacer the the left and right. I have set the visibility of the boxes to desktop, because i thought, there is more space then for the text and it‘s not going to be that narrow. so this is really strange…

Can you please help me to fix this, as my client would like to go online next week.

Thanks in advance,
katrin

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

1) You have this set to 8 columns. Try overriding it like this:

@media (min-width: 768px) {
.home .spb_content_element.col-sm-8 {
    width: 100%;
}
}

2) The icon layout is per your page builder layout, you have chosen two columns, but the two spacer columns each side you have hidden on small screens. If you enabled the spacers, you will get your desired two column layout.

To stop the text overflowing icon boxes, please use this:

.sf-icon-box-content * {
    word-break: break-word;
}

Thanks.

[dermat]

Perfect, that worked. Thanks a lot.

[David Martin – Support]

Anytime!
Thanks.

[dermat]

i have overseen something.
Like that the headlines are again strange, and free spacing of blank spacers are not visible anymore, for example on landscape format of ipad.

What else can we try, please? I have a deadline to meet 🙁

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

You can use the above with a different media query:

@media (min-width: 992px) {
  .home .spb_content_element.col-sm-6 {
    width: 100%;
}
}

[dermat]

Ok, but somehow it‘s getting worse, but just with one headline…

on the desktop version, everything looks fine, except of the headline “unsere veranstaltungen” It‘s not placed really centered. it has around 430 pixel to the left border, but only around 400 to the right.

on the ipad landscape format it‘s not only not centered on the website, but also not centered itself. What is the problem with this one headline? all the other ones look normal (like “Über twinkle”). I don‘t understand it…
And the blank spacers around the headline on the slider aren‘t visible.

on the ipad portrait, its only this headline, where the spacing is bigger to the right, than to the left.

on iphone (landscape and Portrait) it seems to be ok with the centered point. but the blank spacers around the headline on the slider for example isn‘t placed in the center concerning the height. some blank spacers that i defined being visible on phone are not shown anymore.

how can we solve that?

This site needs to get online as soon as possible, and i want the client to be happy…

Please help out…

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

I cannot access your site: