Make SVG Icons the same background Color as on the Footer

Hi @kulius the screenshot you shared is asking me to log into Microsoft Drive, can you please add the screenshot to this site https://snipboard.io/ the site will provide a new link which you can share with me here.

I am not sure with SVG icons you are referring to, everything seems to look the same on desktop and mobile same for the social icons.

Hi there,

the screenshot will explain it.

https://snipboard.io/1yfi9c.jpg

Hope that works.

Kind Regards @kulius

Hi @kulius the background color for mobile and desktop seems to be the same on my end. Did you want to change your social icons to green? If that is the case the article below has more information about how to achieve this:

Social Icons Block

You can reduce the space shown in your screenshot by adjusting the dimension settings for the two column blocks you have added to your footer area. It looks like the columns added both have top and bottom margin.

Columns Block

When you say move AGB and icons to line do you mean moving them lower on the footer? You can add top-padding to the blocks to achieve this.

Hello @thelmachido ,

1.

As you can see in the screen shots and on the website it self. I would love to change the background color of the Socal Icons on the mobile vision. If you have a look on it on the Desktop view you can see that Instagramm and the Youtube icon are red and pink. The same colors as as on the desktop version I would like to have on the phone view.

2.

So I would love to get rid of Top and bottom margin. I had a look on the link you sent me. But al those settings are right and I could not figure out how to make the footer space overall smaller with getting rid of top and bottom margin.

3.

I would love to have the icons and the AGB Menu on the same height a the H2 headings without changing the Size etc. of the text in the footer menus.

Kind reagards Julius

Hi @kulius

As you can see in the screen shots and on the website it self. I would love to change the background color of the Socal Icons on the mobile vision. If you have a look on it on the Desktop view you can see that Instagramm and the Youtube icon are red and pink. The same colors as as on the desktop version I would like to have on the phone view.

Just to confirm – I’m seeing the color of the icons to be the same on both mobile and desktop views (showing red and pink). I’ve included screenshots to show you what I mean.

Are you seeing the mobile footer differently? Could you please share a screenshot of that?

—

So I would love to get rid of Top and bottom margin. I had a look on the link you sent me. But al those settings are right and I could not figure out how to make the footer space overall smaller with getting rid of top and bottom margin.

When you you have the column selected – there are ‘Dimension’ settings in the sidebar which contain the top/bottom margin and padding.

https://www.ads-software.com/documentation/article/dimension-controls-overview/#how-to-find-dimension-controls

Could you please try that out and see how you go?

—-

I would love to have the icons and the AGB Menu on the same height a the H2 headings without changing the Size etc. of the text in the footer menus.

This makes it sounds like you’d prefer the top of those columns to align – is that right? If that’s the case – the issue seems to be caused by a Spacer Block in the AGB menu’s column. If you remove that (or adjust the height of it) you should be able to get that ‘AGB’ text aligned with the H2 elements in the other columns

Hi there,

tanks for replying.

1.

As said on the first post, I have this icons color difference when you open up the side menu on the phone vision. On phone view there ist a sidebar menu for navigation on the website, on this there are the two icons. Goal would be that they have the same color as the icons on the footer. See my Screenshots.

3-1.JPG; 4.JPG

2.

So I tried that but, I use the WP Backery Editor and I can’t find those settings you meant. I set up the footer in (Design/Customizer/Widgets) and from the theme (Twenty Twenty) there are footer 1 and footer 2 given wich I used.

These are the settings i can choose, see screenshots.

1.JPG; 2.JPG

3.

So i removed the spacer at the icons, but still the menu with (AGB; Impressum …) looks like if it not on the same height.

Thx for all your help.

Kind regards @kulius

• This reply was modified 1 year, 3 months ago by kulius.

Hey @kulius

As said on the first post, I have this icons color difference when you open up the side menu on the phone vision. On phone view there ist a sidebar menu for navigation on the website, on this there are the two icons. Goal would be that they have the same color as the icons on the footer. See my Screenshots.

Thanks for clarifying – I see what you mean. There’s not really a way to change the color of those in the settings – but you could try out this custom css. It can be added in the ‘Additional CSS’ section of the Customizer (Appearance > Customize in your admin menu).
https://www.ads-software.com/documentation/article/customizer/#additional-css

/* Style social icons in mobile menu */
#menu-item-15964 a .svg-icon {
 background: #f00075!important;
}
#menu-item-16047 a .svg-icon {
 background: red!important;
}

—

So I tried that but, I use the WP Backery Editor and I can’t find those settings you meant. I set up the footer in (Design/Customizer/Widgets) and from the theme (Twenty Twenty) there are footer 1 and footer 2 given wich I used.

These are the settings i can choose, see screenshots.

In those screenshots – I see you have the settings for the Column Block as a whole selected. If you switch to selecting each individual column – you’ll see those settings I mentioned.

—

So i removed the spacer at the icons, but still the menu with (AGB; Impressum …) looks like if it not on the same height.

Taking a look at this now – I still see the spacer in place in that column. Could you please try again – and send a screenshot?

Hi there,

so I thing the spacer now is removed.

Now I tried again fixing the other stuff but I don’t understand it.

See my quick video her: 2023-07-06 11-48-55.mov

Thx for your help.

Kind regards @kulius

Hi @kulius

so I thing the spacer now is removed.

I see it as removed – the alignment looks much better now – matching the top of those headings.

Now I tried again fixing the other stuff but I don’t understand it.See my quick video her:?2023-07-06 11-48-55.mov

Thanks for the video – I see what you mean about the columns within the Customizer > Widgets.

It looks as though the padding/margin aren’t supported on the Columns block in this theme – so we might need to try another CSS solution. If you go to Customizer > Additional CSS you can add this code.

/* Reduce margin on footer columns */
.footer-widgets-wrapper .wp-block-columns {
 margin-top:10px !important;
 margin-bottom:10px !important;
}

Could you please try that out and let me know how you go?

Hi there,

so I have added your css. And it looks much better now.

What do you think ?

Thx for all your help.

Kind regards @kulius

Hi there,

so I had to change the footer headings to h3.

And now the Css that you provided me doesn’t work anymore.

I am trying to fix it, maybe you could have a look on it.

Thx

Hi @kulius

It looks as though the Headings all have quite a lot of top-padding which is what is causing that.

As a first thing to check – I’d recommend editing those widget areas – and seeing if you can change the padding for the headings.

Dimension Settings Overview

If you don’t have access to that setting – then some CSS like this will work.

/* Reduce padding above footer h3s */
.footer-widgets-wrapper h3 {
 margin-top:10px !important;
 margin-bottom:10px !important;
}

Hi there,

I had to ad your css.

And it didn’t change.

Any guess why ?

Hi @kulius – when I check your site I’m seeing those columns at the bottom aligned now (which is what that CSS was for).

With CSS changes you may need to refresh the page to see them take effect – could you please try that?

Hi there,

so I have added this screenshot of the footer see here

Bildschirmfoto 2023-07-17 um 07.03.12.png

Is there a chance of making the space of top and bottom smaller.

Thanks for all your help.

That would be the last change.

Kind regards Julius