Hi, you have two options for padding in your customised page builder. I like the percentage feature which does not compromise responsiveness. However percentage method does not work on mobile. The rows spacing disappears on mobile.
Can you explain how percentage method works? and why it is not working on mobile?
Reference
( Don't include "px" in your string. e.g "40" - However you can also use a percent value in which case a "%" would be needed at the end e.g. "10%" )
Its part of the design of the theme and if you need space between rows you will need to add padding to the row or to the columns so that the content is separated even though the rows do not have spaces between them.
If this is no a workable alternative then you can try adding a CSS class to the extra class name option on the row settings then use CSS in media queries to add space between the rows.
The question - Can you explain how percentage method works? and why it is not working on mobile? - could we have a link to the page to avoid any confusion.
Percentage is relative while pixels is absolute or with percentages it will adjust depending on the resolution of the screen the page is being viewed while pixels will not adjust and will stay the same even when viewed on different resolution screens.
Yeah this is what I assumed about "Pixels" but I am having problems with it. e.g. when I set 8%, it looks perfect on desktop however on mobile the rows will be very close.
That might just be the responsiveness of the theme taking place.
You could also try and add a margin to the bottom of the column in the columns settings. See if that give you the separation you need.
Also you could add a custom CSS class to the row using the extra class name option on the row settings and then have that CSS class add margin to the element on mobile view using media queries.
Hope this are workable alternatives to add more space between rows on mobile view.
Hi, you have two options for padding in your customised page builder. I like the percentage feature which does not compromise responsiveness. However percentage method does not work on mobile. The rows spacing disappears on mobile.
Can you explain how percentage method works? and why it is not working on mobile?
Reference
( Don't include "px" in your string. e.g "40" - However you can also use a percent value in which case a "%" would be needed at the end e.g. "10%" )
Hi Danish,
Its part of the design of the theme and if you need space between rows you will need to add padding to the row or to the columns so that the content is separated even though the rows do not have spaces between them.
If this is no a workable alternative then you can try adding a CSS class to the extra class name option on the row settings then use CSS in media queries to add space between the rows.
Hope this helps.
Please read my question, this is not my question.
Hi Danish,
Sorry if this did seem unrelated.
The question - Can you explain how percentage method works? and why it is not working on mobile? - could we have a link to the page to avoid any confusion.
Thanks.
To rephrase how is percentage option for spacing different from pixels?
How it works?
Hi Danish,
Apologies for the late reply.
Percentage is relative while pixels is absolute or with percentages it will adjust depending on the resolution of the screen the page is being viewed while pixels will not adjust and will stay the same even when viewed on different resolution screens.
Hope this helps.
Yeah this is what I assumed about "Pixels" but I am having problems with it. e.g. when I set 8%, it looks perfect on desktop however on mobile the rows will be very close.
Hi Danish,
That might just be the responsiveness of the theme taking place.
You could also try and add a margin to the bottom of the column in the columns settings. See if that give you the separation you need.
Also you could add a custom CSS class to the row using the extra class name option on the row settings and then have that CSS class add margin to the element on mobile view using media queries.
Hope this are workable alternatives to add more space between rows on mobile view.
Hi Danish,
Thanks for reaching out.
I think it automatically resizes according to the screen size based on your setting of pixel.
Could you please send us screenshots of both.
Kind Regards
Themenectar Support Team