Vertically Center Elements gone – Full width display reset to standard!

[Swift Ideas – Ed]

@andy_lymeterrace – looking at your code, will get back to you.

@Pothe – social sharing on posts or portfolio items?

The portfolio spacing on responsive is because of the fixed px padding you’ve used – we’d suggest swapping to percentage for responsive purposes.

Have fixed the comments issue for next update.

Thanks,

– Ed

[Swift Ideas – Ed]

Hi @andy_lymeterrace

For the rows that have lots of spacing, it looks like you have them set to window height – please set that to content height.

With the video – please check that row, and make sure the Column Vertical Position is set to “centre” too.

Let us know.

– Ed

[Pothe]

Hi @Ed

Thanks for getting back to me on this.

– There is no fixed px padding on the image or its column. The fixed padding is on the column with the text. If I remove that it still displays wrong. Before, the behaviour was to put the 2 columns on separate rows in responsive view, regardless of padding being added.
– https://www.evernote.com/l/ABXFbtVA_TNE_K7BPCb59UPkVFO7PTIKc0Y
– This is a new portfolio post, so not affected by ay updates.

– For the social sharing issue, it was this portfolio post. Sharing is now hidden as I have hidden the item details.

[Pothe]

Hi @Ed

Something very odd is happening here. I have tested creating an extra row, one for desktop, one for mobile, and arranging the elements accordingly:

https://www.evernote.com/l/ABXr4BOgXIRCorzyshU1g77XvM-t2o9rp2A

There is no padding on the image in either row. Which you can also see is not the case in desktop view. The image is full screen in its 50% column.

But the responsive view still shows a tiny image. https://www.evernote.com/l/ABU2da_fL85DFZyL39EvhuUG5_UjKXP148Q

I’ve been using your pagebuilder for years, and this is not normal behaviour. The last update has really changed a lot of things.

[aimeandalex]

Hi Ed,

I’ve followed all instructions and cannot get my column content to align centrally within every row. Some are fine, two columns of text is ok, as is text by an image. Text by galleries or multilayer parallax definitely isn’t working. It happens regardless of whether or not the elements are within a column.

WordPress, themes and plug ins are up to date. I’ve also tried removing any plug ins that didn’t come with the themes. I have numerous sites running Atelier or Cardinal and can replicate the issue on all of them.

Please could you update us on a fix? I’ve spent a day bodging rows back into place with padding which I’m going to have to remove again when the issue is resolved.

I’m pretty desperate to get this resolved!

Attachments:

You must be logged in to view attached files.

[Pothe]

Hi Team
Sorry to chase on this but my issues still persist.
I cannot seem to get a decent responsive layout… any ideas?

I have also seen that this issue has affected all previous rows in the whole site.
https://www.evernote.com/l/ABUBhbPdwW9Kz5bN4-2ARpTqNhY1k1oQ1PA

This was not like this before. These images should be full width above the text. What’s happened to the page builder in recent updates?

Please help

[Swift Ideas – Ed]

Hi @Pothe,

Will need links to check what is happening on the frontend. Might be best to log your own topic, then provide a link here and I’ll check it right away?

@aimeandalex – if you could do the same too, would be appreciated and easier for us to track.

Thanks,

– Ed

[Pothe]

Hi Ed,
This is my topic 🙂

Here’s the link to the page again:
https://whitefeatherfoundation.com/projects/mothers-of-africa/
– Just to be clear. I removed all padding from the text column to test it. The image column never had any padding anyway.

Also you can see the old home page post affected by the same issue.
https://whitefeatherfoundation.com/

[Pothe]

Hi Ed
some extra info for you… Before we didn’t have to use columns to vertically centre align elements in rows. I didn’t use columns too much before. These issues seem to be related to this new requirement.

[Swift Ideas – Ed]

@Pothe – apologies, will keep this as yours from now on!

In regards to the padding – there is 80px left/right on the Column that contains the Text Block – that is the fixed padding I was referring to.

– Ed

[Pothe]

Hi Ed,

– There is no padding in the column settings: https://www.evernote.com/l/ABWKmymENBVFz6w6H_WceKbYddU_s8eEg_E
– Even if there was, why is this now causing an issue with image in the other column. Regardless of any padding on the text column, the image column should still show full width in responsive above the text column.

Here’s the page builder code for you:

[spb_row element_name="Row" wrap_type="full-width-stretch" row_bg_type="color" color_row_height="content-height" bg_type="cover" parallax_image_height="content-height" parallax_image_movement="fixed" parallax_image_speed="standard" bg_video_loop="yes" parallax_video_height="window-height" row_responsive_vis="hidden-xs" row_top_style="none" row_bottom_style="none" parallax_video_overlay="none" row_overlay_opacity="0" remove_element_spacing="no" row_col_spacing="0" row_col_pos="center" row_col_equal_heights="no" row_expanding="no" row_animation="none" row_animation_delay="0" minimize_row="no" simplified_controls="yes" custom_css_percentage="no" custom_css="margin-top: 0px;margin-bottom: 0px;" border_styling_global="default" el_class="pt0 pb0" width="1/1" el_position="first last"] [spb_column col_animation="none" col_animation_delay="0" col_bg_type="cover" col_parallax_image_movement="fixed" col_parallax_image_speed="0.5" col_padding="0" col_vertical_offset="0" col_horizontal_offset="0" col_custom_zindex="0" col_sm="6" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;" border_styling_global="default" width="1/2" el_position="first"] [spb_image image="7964" image_size="full" frame="noframe" caption_pos="hover" remove_rounded="no" fullwidth="no" overflow_mode="none" el_class="pb0 mb0" link_target="_self" lightbox="no" intro_animation="none" animation_delay="200" width="1/1" el_position="first last"][/spb_image] [/spb_column] [spb_column col_animation="none" col_animation_delay="0" col_bg_type="cover" col_parallax_image_movement="fixed" col_parallax_image_speed="0.5" col_padding="0" col_vertical_offset="0" col_horizontal_offset="0" col_custom_zindex="0" col_sm="6" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;" border_styling_global="default" width="1/2" el_position="last"] [spb_text_block animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;" border_size="0" border_styling_global="default" width="1/1" el_position="first last"]

Mothers of Africa is an Educational Trust

"We believe that education is the only sustainable way to make the difference to the lives of girls and young women.

We educate clinicians to help save the lives of women and girls in Africa and we educate the girls and women themselves. We teach in hospitals, clinics and directly in the community. Mothers of Africa is 12 years young, and a registered charity with the belief, energy and enthusiasm to deliver on our promises for girls and women in Africa."

- Mothers of Africa

[/spb_text_block] [/spb_column] [/spb_row] [spb_row element_name="Row" wrap_type="full-width-stretch" row_bg_type="color" color_row_height="content-height" bg_type="cover" parallax_image_height="content-height" parallax_image_movement="fixed" parallax_image_speed="standard" bg_video_loop="yes" parallax_video_height="window-height" row_responsive_vis="hidden-lg_hidden-md_hidden-sm" row_top_style="none" row_bottom_style="none" parallax_video_overlay="none" row_overlay_opacity="0" remove_element_spacing="no" row_col_spacing="0" row_col_pos="center" row_col_equal_heights="no" row_expanding="no" row_animation="none" row_animation_delay="0" minimize_row="no" simplified_controls="yes" custom_css_percentage="no" custom_css="margin-top: 0px;margin-bottom: 0px;" border_styling_global="default" el_class="pt0 pb0" width="1/1" el_position="first last"] [spb_column col_animation="none" col_animation_delay="0" col_bg_type="cover" col_parallax_image_movement="fixed" col_parallax_image_speed="0.5" col_padding="0" col_vertical_offset="0" col_horizontal_offset="0" col_custom_zindex="0" col_sm="12" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;" border_styling_global="default" width="1/1" el_position="first last"] [spb_image image="7964" image_size="full" frame="noframe" caption_pos="hover" remove_rounded="no" fullwidth="no" overflow_mode="none" el_class="pb0 mb0" link_target="_self" lightbox="no" intro_animation="none" animation_delay="200" width="1/1" el_position="first last"][/spb_image] [/spb_column] [spb_column col_animation="none" col_animation_delay="0" col_bg_type="cover" col_parallax_image_movement="fixed" col_parallax_image_speed="0.5" col_padding="0" col_vertical_offset="0" col_horizontal_offset="0" col_custom_zindex="0" col_sm="12" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;" border_styling_global="default" width="1/1" el_position="first last"] [spb_text_block animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;" border_size="0" border_styling_global="default" width="1/1" el_position="first last"]

Mothers of Africa is an Educational Trust

"We believe that education is the only sustainable way to make the difference to the lives of girls and young women.

We educate clinicians to help save the lives of women and girls in Africa and we educate the girls and women themselves. We teach in hospitals, clinics and directly in the community. Mothers of Africa is 12 years young, and a registered charity with the belief, energy and enthusiasm to deliver on our promises for girls and women in Africa."

- Mothers of Africa

[/spb_text_block] [/spb_column] [/spb_row] [spb_row element_name="Row" wrap_type="full-width-stretch" row_bg_type="color" row_bg_color="#f5f5f5" color_row_height="content-height" bg_type="cover" parallax_image_height="content-height" parallax_image_movement="fixed" parallax_image_speed="standard" bg_video_loop="yes" parallax_video_height="window-height" row_top_style="none" row_bottom_style="none" parallax_video_overlay="none" row_overlay_opacity="0" remove_element_spacing="no" row_col_spacing="0" row_col_pos="center" row_col_equal_heights="no" row_expanding="no" row_animation="none" row_animation_delay="0" minimize_row="no" simplified_controls="yes" custom_css_percentage="no" custom_css="margin-top: 0px;margin-bottom: 0px;" border_styling_global="default" width="1/1" el_position="first last"] [spb_column col_animation="none" col_animation_delay="0" col_bg_type="cover" col_parallax_image_movement="fixed" col_parallax_image_speed="0.5" col_padding="0" col_vertical_offset="0" col_horizontal_offset="0" col_custom_zindex="0" col_sm="12" simplified_controls="yes" custom_css_percentage="no" padding_vertical="80" padding_horizontal="80" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;padding-top: 80px;padding-left: 80px;padding-right: 80px;padding-bottom: 80px;" border_styling_global="default" width="1/1" el_position="first last"] [spb_text_block animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;" border_size="0" border_styling_global="default" width="1/1" el_position="first last"]

The White Feather Foundation Breathes Life into Zambian School

[/spb_text_block] [/spb_column] [/spb_row] [spb_row element_name="Row" wrap_type="full-width-stretch" row_bg_type="color" color_row_height="content-height" bg_type="cover" parallax_image_height="content-height" parallax_image_movement="fixed" parallax_image_speed="standard" bg_video_loop="yes" parallax_video_height="window-height" row_top_style="none" row_bottom_style="none" parallax_video_overlay="none" row_overlay_opacity="0" remove_element_spacing="no" row_col_spacing="0" row_col_pos="center" row_col_equal_heights="no" row_expanding="no" row_animation="none" row_animation_delay="0" minimize_row="no" simplified_controls="yes" custom_css_percentage="no" custom_css="margin-top: 0px;margin-bottom: 0px;" border_styling_global="default" width="1/1" el_position="first last"] [spb_column col_animation="none" col_animation_delay="0" col_bg_type="cover" col_parallax_image_movement="fixed" col_parallax_image_speed="0.5" col_padding="0" col_vertical_offset="0" col_horizontal_offset="0" col_custom_zindex="0" col_sm="6" simplified_controls="yes" custom_css_percentage="no" padding_vertical="80" padding_horizontal="80" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;padding-top: 80px;padding-left: 80px;padding-right: 80px;padding-bottom: 80px;" border_styling_global="default" width="1/2" el_position="first"] [spb_text_block animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;" border_size="0" border_styling_global="default" width="1/1" el_position="first last"]

" To deliver good quality education, Mothers for Africa firmly believes that you must have a safe, effective and an inspiring place to learn. With that in mind, we have now built our first ever Primary School. What an adventure it's been.

This school is in Shiyala Village in the bush in rural Zambia, its for 360 girls and boys. They will receive the education to build their own future, to build their way out of poverty and to take control of their own health. It's a big moment for the charity, but also a big moment for the children of the village."

- Mothers of Africa

[/spb_text_block] [/spb_column] [spb_column col_animation="none" col_animation_delay="0" col_bg_type="cover" col_parallax_image_movement="fixed" col_parallax_image_speed="0.5" col_padding="0" col_vertical_offset="0" col_horizontal_offset="0" col_custom_zindex="0" col_sm="6" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;" border_styling_global="default" width="1/2" el_position="last"] [spb_image image="7972" image_size="full" frame="noframe" caption_pos="hover" remove_rounded="no" fullwidth="no" overflow_mode="none" el_class="mb0 pb0" link_target="_self" lightbox="no" intro_animation="none" animation_delay="200" width="1/1" el_position="first last"][/spb_image] [/spb_column] [/spb_row] [spb_row element_name="Row" wrap_type="full-width-stretch" row_bg_type="color" row_bg_color="#f5f5f5" color_row_height="content-height" bg_type="cover" parallax_image_height="content-height" parallax_image_movement="fixed" parallax_image_speed="standard" bg_video_loop="yes" parallax_video_height="window-height" row_top_style="none" row_bottom_style="none" parallax_video_overlay="none" row_overlay_opacity="0" remove_element_spacing="no" row_col_spacing="0" row_col_pos="center" row_col_equal_heights="no" row_expanding="no" row_animation="none" row_animation_delay="0" minimize_row="no" simplified_controls="yes" custom_css_percentage="no" custom_css="margin-top: 0px;margin-bottom: 0px;" border_styling_global="default" width="1/1" el_position="first last"] [spb_column col_animation="none" col_animation_delay="0" col_bg_type="cover" col_parallax_image_movement="fixed" col_parallax_image_speed="0.5" col_padding="0" col_vertical_offset="0" col_horizontal_offset="0" col_custom_zindex="0" col_sm="12" simplified_controls="yes" custom_css_percentage="no" padding_vertical="80" padding_horizontal="80" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;padding-top: 80px;padding-left: 80px;padding-right: 80px;padding-bottom: 80px;" border_styling_global="default" width="1/1" el_position="first last"] [spb_button button_text="Support our Projects" button_size="standard" button_colour="accent" button_type="standard" rounded="no" button_dropshadow="no" button_link="/choose-a-cause/" button_target="_self" align="center" animation="none" animation_delay="0" width="1/1" el_position="first last"] [/spb_column] [/spb_row] [spb_row element_name="Row" wrap_type="content-width" parallax_image_height="content-height" parallax_image_movement="fixed" parallax_image_speed="0.5" bg_video_loop="yes" parallax_video_height="window-height" parallax_video_overlay="none" row_overlay_opacity="0" row_col_pos="default" width="1/1" el_position="first last"] [spb_column col_sm="2" padding_horizontal="0" width="1/6" el_position="first"] [/spb_column] [spb_column col_sm="8" padding_horizontal="0" width="2/3" el_position="last"] [spb_text_block animation="none" animation_delay="0" simplified_controls="yes" custom_css_percentage="no" padding_vertical="0" padding_horizontal="0" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;" border_size="0" border_styling_global="default" width="1/1" el_position="first last"]

Sustainable Education in Action

"It is the way to save lives, lives otherwise lost early and uselessly. This school will be the beating heart of this community of 2,000 people.

We have been very excited to work with the Social Enterprise Orkid Studio in producing something quite exceptional. However, without the school’s, desks, boards, and library shelves, this heart just won’t beat.

Thankfully, The White Feather Foundation heard about our build and have done something very exciting. They have donated the school furniture to bring the school to life. We are now able to open a living, working, beautiful school for these children.

Thank you to Julian Lennon, The White Feather Foundation and their supporters."

- Mothers of Africa

[/spb_text_block] [/spb_column] [/spb_row] [spb_row element_name="Row" wrap_type="full-width-stretch" row_bg_type="color" color_row_height="content-height" bg_type="cover" parallax_image_height="content-height" parallax_image_movement="fixed" parallax_image_speed="standard" bg_video_loop="yes" parallax_video_height="window-height" row_top_style="none" row_bottom_style="none" parallax_video_overlay="none" row_overlay_opacity="0" remove_element_spacing="no" row_col_spacing="0" row_col_pos="default" row_col_equal_heights="no" row_expanding="no" row_animation="none" row_animation_delay="0" minimize_row="yes" simplified_controls="yes" custom_css_percentage="no" custom_css="margin-top: 0px;margin-bottom: 0px;" border_styling_global="default" width="1/1" el_position="first last"] [spb_column col_sm="4" padding_horizontal="0" width="1/3" el_position="first"] [spb_image image="7982" image_size="full" frame="noframe" caption_pos="hover" remove_rounded="yes" fullwidth="no" overflow_mode="none" link_target="_self" lightbox="no" intro_animation="none" animation_delay="200" width="1/1" el_position="first last"][/spb_image] [/spb_column] [spb_column col_sm="4" padding_horizontal="0" width="1/3"] [spb_image image="7983" image_size="full" frame="noframe" caption_pos="hover" remove_rounded="yes" fullwidth="no" overflow_mode="none" link_target="_self" lightbox="no" intro_animation="none" animation_delay="200" width="1/1" el_position="first last"][/spb_image] [/spb_column] [spb_column col_sm="4" padding_horizontal="0" width="1/3" el_position="last"] [spb_image image="7984" image_size="full" frame="noframe" caption_pos="hover" remove_rounded="yes" fullwidth="no" overflow_mode="none" link_target="_self" lightbox="no" intro_animation="none" animation_delay="200" width="1/1" el_position="first last"][/spb_image] [/spb_column] [/spb_row] [spb_row element_name="Row" wrap_type="full-width-stretch" row_bg_type="color" row_bg_color="#f5f5f5" color_row_height="content-height" bg_type="cover" parallax_image_height="content-height" parallax_image_movement="fixed" parallax_image_speed="standard" bg_video_loop="yes" parallax_video_height="window-height" row_top_style="none" row_bottom_style="none" parallax_video_overlay="none" row_overlay_opacity="0" remove_element_spacing="no" row_col_spacing="0" row_col_pos="center" row_col_equal_heights="no" row_expanding="no" row_animation="none" row_animation_delay="0" minimize_row="no" simplified_controls="yes" custom_css_percentage="no" custom_css="margin-top: 0px;margin-bottom: 0px;" border_styling_global="default" width="1/1" el_position="first last"] [spb_column col_animation="none" col_animation_delay="0" col_bg_type="cover" col_parallax_image_movement="fixed" col_parallax_image_speed="0.5" col_padding="0" col_vertical_offset="0" col_horizontal_offset="0" col_custom_zindex="0" col_sm="12" simplified_controls="yes" custom_css_percentage="no" padding_vertical="80" padding_horizontal="80" margin_vertical="0" custom_css="margin-top: 0px;margin-bottom: 0px;padding-top: 80px;padding-left: 80px;padding-right: 80px;padding-bottom: 80px;" border_styling_global="default" width="1/1" el_position="first last"] [spb_button button_text="Support our Projects" button_size="standard" button_colour="accent" button_type="standard" rounded="no" button_dropshadow="no" button_link="/choose-a-cause/" button_target="_self" align="center" animation="none" animation_delay="0" width="1/1" el_position="first last"] [/spb_column] [/spb_row]

[Swift Ideas – Ed]

I don’t see that responsive issue with the images not being full width – is this issue still present for you?

I’ll take a look at that page code now.

– Ed

[Swift Ideas – Ed]

Which column were you looking at for the settings? I checked the column around the text block that has “To deliver good quality education…” text within, and see here:

– Ed

[Pothe]

Hi Ed,
Top row:
https://www.evernote.com/l/ABXBmPBcyDFJY7CJmy6Yv_qiDqs1hmdmSKw

In responsive:
https://www.evernote.com/l/ABXiy-te-PdDKILPLtAaIVLqdMAzI7QNkl0

[Swift Ideas – Ed]

Can you try clearing the browser cache? This is what I see here:

– Ed