Divi Test Page Used by Greg

Person Modules – Bio Photo Centering [SOLVED]

When the Row Module Settings are set to the default setting, the Bio Module photos are centered as shown below.

However, when the Row Module Settings are set to “Make This Row Fullwidth” the bio photos are no longer centered. The wider bio boxes are desirable because they allow for more text and more complete use of the row.

There are three rows of bio boxes below.

  • Row 1 has mostly default settings which results in narrow columns.
  • Row 2 has the Row Module set to 1200px. This helps create slightly larger columns for better use of the row space.
  • Row 3 has the Row Module set to fullwidth. This results in photos that are not always centered depending on how wide the page visitor’s browser window is open.
Linda Sampleperson

Linda Sampleperson

Director of Sample Bio Team

Linda Sampleperson is a sample person used to test the Divi Person module.

Linda Sampleperson

Linda Sampleperson

Director of Sample Bio Team

Linda Sampleperson is a sample person used to test the Divi Person module.

Linda Sampleperson

Linda Sampleperson

Director of Sample Bio Team

Linda Sampleperson is a sample person used to test the Divi Person module.

Linda Sampleperson

Linda Sampleperson

Director of Sample Bio Team

Linda Sampleperson is a sample person used to test the Divi Person module.

Padding: 18px on all sides
Row Module Width: 1200px

Linda Sampleperson

Linda Sampleperson

Director of Sample Bio Team

Linda Sampleperson is a sample person used to test the Divi Person module.

Padding: 18px on all sides
Row Module Width: 1200px

Linda Sampleperson

Linda Sampleperson

Director of Sample Bio Team

Linda Sampleperson is a sample person used to test the Divi Person module.

Padding: 18px on all sides
Row Module Width: 1200px

Linda Sampleperson

Linda Sampleperson

Director of Sample Bio Team

Linda Sampleperson is a sample person used to test the Divi Person module.

Padding: 18px on all sides

Advanced > Member Image: The following code was added and this seems to correct the image centering issue.

margin-left:auto !important;
margin-right:auto !important;

Linda Sampleperson

Linda Sampleperson

Director of Sample Bio Team

Linda Sampleperson is a sample person used to test the Divi Person module.

Padding: Left 28px, Right 36px

Linda Sampleperson

Linda Sampleperson

Director of Sample Bio Team

Linda Sampleperson is a sample person used to test the Divi Person module.

Padding: Left 28px, Right 36px

Parallax Effect – Browser Compatibility

When a fullwidth row has an image with parallax settings enabled, it does not work on some browsers. Below are some test images. The first uses True Parallax as the method (this is the default) and the second usesĀ CSS as the parallax method.

The solution to the parallax problem is to add the following CSS code to the Divi theme options page:

.et_pb_section_parallax .et_pb_parallax_css, .et_pb_slides .et_parallax_bg.et_pb_parallax_css {
transform: none;
}

Once this CSS code is added the parallax view works on Chrome and Firefox. However, it still does not work on tablets or smartphones.

This is a fullwidth slider using the Parallax Effect with True Parallax as the method.

This is a fullwidth slider using the Parallax Effect with CSS as the method.

The parallax feature works best when the image utilized has content below it on the page. This allows for the scrolling effect. So, the following filler text is provided to achieve that outcome.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.