Yann

Hi Vicent,

Thanks for the kind words. Unfortunately the Twenty Twenty-One theme doesn’t support the display of Gravatar pictures. Due to the way this theme has been coded, it’s unfortunately not possible for us to add an option to display Gravatar/Twitter to our Twentig plugin.

Have a great day,
Yann

I’ve just visited your website and it seems like you’ve successfully managed to add the blog title on the Blog page.

Hello,

In order to add an icon to a button using a CSS class, you can follow these steps:

1. Prepare your SVG icon and convert it to Data URI using a converter like https://yoksel.github.io/url-encoder/.
2. Inside your WordPress Dashboard, navigate to Appearance > Customize > Additional CSS.
3. Paste the following code into the Additional CSS box:

.button-icon a.wp-block-button__link::before {
content: "";
display: inline-block;
height: 24px;
width: 24px;
background-image: url("data:image/svg+xml, {your encoded SVG here}");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin-right: 8px;
vertical-align: middle;
}

Replace {your encoded SVG here} with the Data URI you got from the URL Encoder.

4. Adjust the height, width, and margin properties to suit your needs.
5. Now, apply the “button-icon” class to each button block you want the icon to appear in. You can do this by selecting the button block, then in the right sidebar under “Advanced”, add “button-icon” to the “Additional CSS Class(es)” field.

Hope that helps,
Yann

Hi,

The issue seems to be that you have enabled the “Stretch link” option on the Group block that wraps the “Solo Works” heading and the Query Loop block. To resolve this, you need to select this Group and disable the “Stretch link” option.

If your intention is to stretch the link for each item in your portfolio, you’ll need to insert a Group block around the Columns block that you have already incorporated inside the Query Loop. Once this is done, enable the “Stretch link” option on this newly inserted Group block.

Please let me know if this works,
Yann

Hi,

For the Twenty Twenty-One theme, add the following CSS code in the Customizer > Additional CSS panel to reduce the header’s spacing on mobile devices. As I’m not sure which padding you want to reduce, I’ve added comments to the code to indicate which part of the header is affected by each CSS rule. Keep only the rules you need. You may also adjust the values to your liking.

@media only screen and (max-width: 651px) {

/* reduce spacing above and below logo */
#masthead .site-logo { margin: 0; padding-bottom: 20px; }

/* reduce spacing between black border and menu */
#masthead { row-gap: 10px;}

/* reduce spacing below menu */
#masthead { padding-bottom: 20px; }

}

Hope that helps,
Yann

The query loop appears to be set up correctly, so it is unlikely that the issue originates from there.

Have you tried temporarily deactivating all of your plugins to rule out any plugin conflicts?

Hi there,

To rule out a conflict with the Twentig plugin, please try to temporarily deactivate it. If the problem persists, then the issue is not related to Twentig.

The best way to rule out any plugin conflict is to temporarily deactivate all of your plugins. If this solves the issue, reactivate your plugins one by one until you find which plugin is causing the problem.

If deactivating the plugins doesn’t resolve the issue, it’s possible that the Archive template is the source of the problem. Please go to Appearance > Editor > Templates > Archive and copy and paste the code of the template here so I can take a look.

Thanks,
Yann

Hi there,

Unfortunately, we aren’t familiar with the Polylang plugin, so I can’t say for certain if translating footer widgets is possible in the free version. Just to clarify, the footer widgets are not a feature added by Twentig, but are part of the Twenty Twenty theme itself. To get more accurate information and assistance, I suggest heading over to the Polylang support forum.

Best of luck with your site translation!
Yann