Swift Page Builder – Row Hight – Inner Column Content Isn't Centered

[guentherportfolio]

Happy New Year 🙂

The new year starts with a new support thread 😉
If I want to edit a row and I want to set the PARALLAX IMAGE HEIGHT to WINDOW HEIGHT, all content isn’t centered horizontal within that row.

I already have set the INNER COLUMN HEIGHT to WINDOW HEIGHT too and removed any padding. I further have tested it with some padding, which works fine for my screen resolution, but it doesn’t work for mobile devices and other resolutions.

It would be great if you could have a look on that. Thanks in advance.

[guentherportfolio]

This reply has been marked as private.

[David Martin – Support]

Did you mean it’s just for mobile now the issue?

Can we login and amend the page or is this a live page currently?

[guentherportfolio]

Hi David,

its actually on every device, also on my mac.
You can login, but it would be good if you could create a draft or copy of that page and adapt it there. Thanks in advance for your help.

[David Martin – Support]

This reply has been marked as private.

[guentherportfolio]

This reply has been marked as private.

[David Martin – Support]

Hi,

Please adjust that using this:

@media only screen and (max-width: 767px) {
.content-v-align.spb-row-container > div.spb_content_element {
    margin-top: 0%!important;
}
}

[guentherportfolio]

This reply has been marked as private.

[David Martin – Support]

I think this is related to your other thread where I mentioned you have a CSS error that is causing other CSS to not work. I have now updated that for you.

I have also amended the CSS:

/*Horizontale Ausrichtung Text im Full width Bild*/
@media only screen and (max-width: 767px) {
.content-v-align.spb-row-container > div.spb_content_element {margin-top: 0%!important;}
}
@media (max-width: 979px) and (min-width: 768px) {
.content-v-align.spb-row-container > div.spb_content_element {margin-top: 10%!important;}
}
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
.content-v-align.spb-row-container > div.spb_content_element {margin-top: 5%!important;}
}

[guentherportfolio]

Oh I see. Thank you very much for updating this, David.

Unfortunately the issue with the too big image and the text which isn’t centered does already exist 🙁 Do you have any other hints here? Hopefully there isn’t an other CSS error :):):)

Thanks
Martin

[David Martin – Support]

Do you mean it still exists? For what screen size, I need screenshots with your feedback so I can tweak.

[guentherportfolio]

This reply has been marked as private.

[David Martin – Support]

Thanks for the video that really helps clear things up.

I have fixed the desktop version now for you.

I cannot amend the height as this is dynamically generated on page load. You would need a developer to adjust this further.

[guentherportfolio]

Thanks David. I really appreciate your help. Allover I am happy now 🙂 The only thing where I am a bit disappointed, is the problem with the window height setting. But there I will do some compromise and change this back to “content height”. Thanks for your help.

[David Martin – Support]

I understand this also, I’ll test this further locally and report back to the team and see what we can do to improve this. You should not need (ideally) any extra CSS like I have provided.