Icons2Go Problem

alignment

6 years, 4 months ago web7icons
Participant
Hello Andrea,

How do I get the icon inline with the text?

I have the latest Version 5.5.2 of WPBakery Page Builder. I don’t have your setting option!

I don’t have top, middle and bottom. Only this:

And for example: my parallax menu is also in ‘Row Type’ and not in ‘Parallax’

Best regards
- This topic was modified 6 years, 4 months ago by web7icons.
- This topic was modified 6 years, 4 months ago by web7icons.
- This topic was modified 6 years, 4 months ago by web7icons.
- This topic was modified 6 years, 4 months ago by web7icons.
6 years, 4 months ago themes2go
Keymaster

Hello,
I’ve just recorded a quick video for you.

Settings options can differ from theme to theme, but “content position” setting should be a default WP Bakery Page Builder option.

Thanks
6 years, 4 months ago web7icons
Participant
Not working, if you don’t believe me I can give you my WordPress-Password and check by yourself.

Please give me your e-mail adress that I can send it to you.

I tried it with an element holder, which gives me padding function, then it works for desktop version, but not for tablet and mobile.
- This reply was modified 6 years, 4 months ago by web7icons.
6 years, 4 months ago web7icons
Participant

Image of desktop with padding

Image of mobile even with padding not working

6 years, 4 months ago themes2go
Keymaster

Hello! Igor here, developer from T2G.
Thanks for your screenshots, despite the issue isn’t regarding the icon themselves but more in general the Page Builder CSS end result, we took some time to do some tests and found out that there are, as you notice, those alignment differencies in mobile.

Those depends on the CSS of Page Builder and of the specific theme you adopted, so the icon itself doesn’t have many possibilities to fix what stands outside of it.

Even thou we are now talking about fixing stuff out of the plugin territory, I’d like to help you a bit more with the problem.
Anyway this requires creating some little CSS for your specific page, and it is pretty hard without accessing the page.

I’d say that if you can share the URL I’ll try to provide you a fix, even if not in this immediate moment.

Also, I’d like to present a possible workaround, don’t know if you tried already.

You can make a row into another row in Page Builder.
Then add an inner row with 2 columns, place the icon in a column and the text in the other column.
Then in the CHILD row, set vertical align to middle, and select Equal Height.
This should maybe do the trick.
6 years, 4 months ago web7icons
Participant
No that’s not true, we are talking about fixing stuff of the plugin. I don’t have this option in the settings. So I can’t choose it. And you didn’t say that this icon plugin works only with your theme.
Maybe the problem is because I don’t use your theme, but on you product page, you said that this plugin is working with the latest WPBakery Page Builder. I have the latest.

Why don’t you programmed this option directly in the icons2go settings? I use the Bridge Theme of Qode. They have also a icon plugin whereby settings are in the icons tab directly.

And the ‘trick’ doesn’t work. Also I have noticed that the telephone icon (white) is getting to small in mobile version.

Here is my Page: https://www.akoach.com/

If you give me your e-mail address, I can send you a login link and password that you can see the problem.
- This reply was modified 6 years, 4 months ago by web7icons.
- This reply was modified 6 years, 4 months ago by web7icons.
6 years, 4 months ago themes2go
Keymaster

Hi and thanks for the link.
No login needed, issue found.
The problem happens because you manually added a PADDING TOP to the text as you can see in the screenshot.
The plugin works with every theme, and the problem was not from our plugin but from your settings, therefore it can be fixed just changing the padding.
Please note how you have a padding top 12px (bad solution)

https://imgur.com/iN7jM27

While it’s perfectly centered vertically if you remove that padding.
https://imgur.com/4qZoiMA

NB I colored the icon in red to see it better because is white on white.

6 years, 4 months ago themes2go
Keymaster

PS please note that in Page Builder you can also hide and show certain columns for specific resolutions, so you can make an element for mobile and an element for desktop with different formatting and settings, which for small elements is a good solution.

Another important thing to note is that your actual theme is REWRITING VISUAL COMPOSER STYLING and this can lead to different results which we are not responsible for:
https://imgur.com/a/eI4IlrH
visual composer classes starts with vc_ while your rows and columnts are with q_elements_ (not standard page builder classes).

Last but not lease, vertical alignment of containers is NOT something that should be handled by the icon itself, it would mean that a content can rule the container.

It is as saying that a car should be able to change the size of the carage it’s in, which is the opposite of the general principle of web development, for which each element needs to rule onnly the parts belonging to its subcontainer.
6 years, 4 months ago web7icons
Participant
Thanks.

I know that I have this padding of 12.5px, I added it for alignment in desktop. I understand that is not a good solution. Do you know a better? Just give me your WPBakery Page Builder Code and I try it for mobile and desktop. How do I get the text of blue business icon in alignment for desktop and mobile?

Also your icons getting to small on mobile. If you look on my Contact Footer Icons. They have no change in size in desktop and mobile.
- This reply was modified 6 years, 4 months ago by web7icons.
- This reply was modified 6 years, 4 months ago by web7icons.
- This reply was modified 6 years, 4 months ago by web7icons.
- This reply was modified 6 years, 4 months ago by web7icons.
6 years, 4 months ago themes2go
Keymaster
Icons are responsive, is the same also in the demo site. If you want the icons to be same size you need to add your own CSS with the media queries. The plugin works as in the demo you saw, these are code customizations.

The css to change size is
```
.t2gicons-icon.t2gicon-fontsize-30::before {
    font-size: 15px;
}
```
of course the selector is based on the icon size you choose, in this case “fontsize-30”
6 years, 4 months ago web7icons
Participant

Thanks for the code. It works perfectly!

Back to the main issue:
I have deleted the 12.5px padding like you said: in mobile (red telephone icon) it’s now in alignment with text. But not in Desktop. Do you have a Code?
6 years, 4 months ago web7icons
Participant
With this Code it’s working for mobile and desktop:
```
@media screen and (max-width: 800px)
{
 .icons2go_css .t2gicons-icon.t2gicon-fontsize-30::before
 {
  font-size: 30px;
 }
} 

@media not screen and (max-width: 800px)
{
 .icons2go_text
 {
  padding-top: 11px;
 }
}
```
Do you have a solution for my big green icon? See page.
- This reply was modified 6 years, 4 months ago by web7icons.
- This reply was modified 6 years, 4 months ago by web7icons.
6 years, 4 months ago web7icons
Participant
Are you still there? So it’s not possible to arrange the icon beside the text? Only in desktop mode? What is your better solution???

The green icon is without any theme codes.
- This reply was modified 6 years, 4 months ago by web7icons.
6 years, 4 months ago themes2go
Keymaster

Hi, I’m sorry I thought my previous answer was already providing the solution:
https://d.pr/free/i/buC1s5

I’ll try to be more clear: in Page Builder (visual composer) while you edit the Column setting (only columns, not rows or other elements) you have a tab with Responsive options.

In this tab you can choose to display that column only in specific devices/resolutions.

With this system you can format a space for mobile and one for desktop, or even make 3 secmentations.

Stil, all this thread has nothing to do with the Icons plugin, but is about Page Builder and how to use it.

My best suggestion is to please study the page Builder manual as what you need doesn’t require any extra CSS more than the one I provided to change the icon size.

All you want to do is within page Builder possibilities without any programming or coding.

Please start here
https://wpbakery.com/video-academy/control-elements-different-devices-responsive-column-controls/

Then you have the full manual to read, but this is NOT support for our plugin.