Page Builder Row Styles not working


#1

Not sure if this is a theme or Page Builder issue but…

Using Page Builder the “Row Styles” settings do not take, so I can only adjust styles in individual Widget Styles settings (such as background color or image, padding, etc.)

This limits my ability to style Rows with multiple columns.

Site: www.school4schools.com

Thanks for your help with this!


#2

Hi,

So adding a background color image to a Row in Design options do not show up or what is the issue with the Rows?

Best Regards,
Csaba


#3

I spent more time with it today testing out scenarios. Also went through the Page Builder support forumns but couldn’t find anything relevant.

What I have found is:

  1. The Row Style background image and DOES WORK via an image link using the Row Styles/Theme/Background field.(background color works here, too)

  2. The Row Style background image DOES NOT WORK via the Row Styles/Design/Background Image setting. (see here: www.school4schools.com in the row “Students Say” and “Parents Say…” >> the background image is set in the Row Style/Design/Background but it does not appear. The same background images that do appear are set by the individual Widget Styles.

Using the Row Styles /Theme settings is not useful because it gives me no control over the image scaling (“tiled,” “cover” etc., which I need).

Tks for your help!


#4

Hi,

Yes, it’s surely works in Row Styles / Theme Settings, add the images you want then we can help you with some Custom CSS to add styles to like “tiled,” “cover” etc, juts post a link to your site and point out for which section you want to change the background and how.

Best Regards,
Csaba


#5

Alright, that will work. Would be nice if the Row Styles/Design function worked. Is that a conflict issue w/ the theme?

Anyway, please let me know the code for background image sizing in Row Style/Theme for “cover” and “parallax,” as I will use this a lot. P

Please also let me know the code for padding and margins to use in Custom CSS in Row Style/Theme, as those functions don’t work under Row Style/Design, either, and I’d like to reduce the spacing between rows.

The site is www.school4schools.com. The body section of the front page is built w/ Page Bulider so you can see it there.

Thanks.


#6

Hi,

You can add background-size: cover; or add padding or margin to .panel-grid, but if you want to add different settings to different Rows, then you will need track the ID of the Row, so every Row will have separate settings.

Best Regards,
Csaba


#7

Thanks, Csaba, background-size: cover; works, per the “Students Say…” row on http://school4schools.com/.

Finally, then, how do I scale the image to fit into the row size?


#8

Hi,

The .panel-grid actually was the grid inside the row, not the whole row, for the whole row you need to add to .panel-row-style, but the panel row is that wide, so the image is now the full-width of the Row.

Best Regards,
Csaba


#9

got it, thanks!


#10

Hi,

Great! You’re most welcome! If you need help with anything else, please, feel free to open a new topic.

Have a nice day!

Best Regards,
Csaba