We've had contact about this before but I'm still experiencing some troubles with my pop-up on bigger screen sizes.
In the attached screenshot you can see the content within the columns is not centered, but that should be the case. On screen sizes lower than 1600px it shows almost correct, but above it it's not. Can we solve that?
1. On smaller screens the first column has a lot of padding on the left and there is a border on the right with padding after that border. See screenshot 1.
This happened after adding the code/snipper you provided:
2. On bigger screens, as you can see in the second screenshot all the content is centered in the frist column (see the red border). There is the same white space between the left side and the right border. The second column is not centered, the white space on the right is so much more compared to the white space on the left.
I hope I've explained well enough. Please let me know.
The content is build with Salient, visual composer. That's why I'm addressing this to you guys. You helped me before with the same (third party) plugin. I will also contact them, but if you see anything that's within Salients aim. Please let me know.
It appears that the Popup maker plugin applies default styling for text alignment which is overriding the "centered text" page builder column option. You can correct that by adding the following snippet into the custom CSS box located in the Salient options panel > General Settings > CSS/Script related tab:
Hi there,
We've had contact about this before but I'm still experiencing some troubles with my pop-up on bigger screen sizes.
In the attached screenshot you can see the content within the columns is not centered, but that should be the case. On screen sizes lower than 1600px it shows almost correct, but above it it's not. Can we solve that?
https://zeal.kleidi.nl/ > click on the icon which says 'Team ZEAL'.
Hello Tes,
Please try this css:
.vc_row-fluid>.span_12, body[data-col-gap=default] .vc_row-fluid[data-column-margin=default]:not(.full-width-content) .full-page-inner>.container>.span_12 {
margin-left: 1%;
margin-right: 0%;
}
Thanks.
Thanks Judith,
So on bigger screens the first column is now centered, see first screenshot. I would like the same at the other columns.
On smaller screens the first column has more white space on the left and right compared to the other columns. See my second screenshot.
Hey Again,
Try using the "Centered Content" Field in the Column Settings.
Thanks
ThemeNectar Support Team
Hi Tahir,
I just tried that in the second column with 'Nadav Goldstoff' but it's not affecting it. Do you know why it's not affecting it?
Hello Tes,
Please share screenshots of what you are getting on your end that is not centering so that we don't miss the point.
Thanks.
Sure, I've attached them. There are 2 problems:
1. On smaller screens the first column has a lot of padding on the left and there is a border on the right with padding after that border. See screenshot 1.
This happened after adding the code/snipper you provided:
.vc_row-fluid>.span_12, body[data-col-gap=default] .vc_row-fluid[data-column-margin=default]:not(.full-width-content) .full-page-inner>.container>.span_12 { margin-left: 1%; margin-right: 0%; }
2. On bigger screens, as you can see in the second screenshot all the content is centered in the frist column (see the red border). There is the same white space between the left side and the right border. The second column is not centered, the white space on the right is so much more compared to the white space on the left.
I hope I've explained well enough. Please let me know.
Thanks in advance.
Hi there,
Did you manage to have a look at this?
Thanks in advance.
Hello Tes,
I am looking at this and since it is a third party plugin customization , I would request that you contact the plugin support team to assist further.
Thanks.
Hi Judith,
The content is build with Salient, visual composer. That's why I'm addressing this to you guys. You helped me before with the same (third party) plugin. I will also contact them, but if you see anything that's within Salients aim. Please let me know.
Hey Tes,
It appears that the Popup maker plugin applies default styling for text alignment which is overriding the "centered text" page builder column option. You can correct that by adding the following snippet into the custom CSS box located in the Salient options panel > General Settings > CSS/Script related tab:
.popmake-content .centered-text * { text-align: center!important; }Ensure that you've enabled the centered text option on all of those columns, it only appears to be active on a few at the moment.
You'll also need to the following rule to center your images in that popup instance:
.picture-nadav { margin: 0 auto; background-position: center; }Awesome, thanks!