Twentig

You should add the cols-align-bottom class on the parent columns block (not on the single column block), the ones which have the card shadow style. Then you need to add the custom CSS from my previous answer in the Customizer > Additional CSS (I don’t see it on your website).

The buttons overflow the edges because they don’t have enough space. What you can do is change the columns stacking. To do so, select the Columns parent block containing the buttons and the price, and inside the settings sidebar, select “Medium screens” for the Columns stacking option.

Hope that helps.

All our block patterns, page templates, and starter websites are responsive and work perfectly on mobile devices.

I’m not sure if that’s what you want to achieve, but we have a “Coming soon” pattern that might be useful (screenshot).
See more info to insert a block pattern.

I’ve browsed the plugin directory but haven’t found any plugin to do it. If you don’t have a lot of pages, adding custom CSS isn’t too complicated. Let me know if you are interested, and I can help you with the CSS.

Hi,

The background image is a WordPress core feature, it’s not a feature added by Twentig. This feature lets you set a background image for the body of all the pages. Unfortunately, you can’t set a different image for a specific page.

If you can share your website’s URL, maybe I can help you achieve it with custom CSS.

Tom

Hi.

For the Twenty Twenty-One theme, under Customizer > Colors & Dark Mode, Twentig adds options to change the colors of the default buttons globally. However, if you change the color or a specific button block, the hover color reverts to the default (this is how Twenty Twenty-One designed the buttons). To override it, you can create a custom CSS class. The example below shows how to create a custom-button class that will be applied to a button block:

First add the following CSS in the Customizer > Additional CSS:

.wp-block-button.custom-button .wp-block-button__link:hover,
.wp-block-button.custom-button .wp-block-button__link:active,
.wp-block-button.custom-button .wp-block-button__link:focus {
	background: #ff0000 !important;
	color: #fff !important;
	border-color: transparent !important;
}

Then in the block editor, select your button block, open the settings sidebar, and type custom-button in the Additional CSS Class(es) field under the Advanced panel.

Replace the color values as you like.

I hope the above is useful to you.
Tom

Hi,

Thanks for your message.

Can you please tell me how you’re building your custom footer (child theme, another plugin), so I can see why there’s a conflict between your custom footer and our plugin?
If you don’t change Twentig’s footer options (Footer Layout and Footer Credit set to default, and Display site title/logo checked), Twentig shouldn’t interfere with your footer.

Below is the CSS used to change the mobile navigation breakpoint (you can add it in Customizer > Additional CSS, you might need to adjust some values depending on your logo size):

@media (min-width:482px) and (max-width: 1023px) {

	.menu-button-container {
		display: flex;
		padding-right: calc(var(--global--spacing-horizontal) - 20px);
		padding-top: 60px
	}

	.lock-scrolling .site {
		position: fixed;
		max-width: 100%;
		width: 100%;
	}	

	.site-header .primary-navigation {
		position: absolute;
		top: var(--global--admin-bar--height);
	}
		
	.primary-navigation-open .primary-navigation {
		width: 100%;
		position: fixed;
		z-index: 2;
	}

	.primary-navigation > .primary-menu-container {
		display: block;
		position: fixed;		
		visibility: hidden;	
		opacity: 0;
		top: 0;
		height: 100vh;
		z-index: 499;
		overflow-x: hidden;
		overflow-y: auto;			
		transform: translateY(var(--global--spacing-vertical));
		padding: calc(6 * var(--global--spacing-unit)) var(--global--spacing-horizontal) var(--global--spacing-horizontal);
		background-color: var(--global--color-background);
		margin-left: 0;
	}

	.primary-navigation > div > .menu-wrapper {
		padding-bottom: 120px;
	}

	.primary-navigation > div > .menu-wrapper li {
		display: block !important;
		position: relative;
		width: 100%;
		margin-left: 0 !important;
	}

	.primary-navigation a {
		font-size: var(--primary-nav--font-size-mobile);
	}

	.site-header .primary-navigation .primary-menu-container .menu-wrapper a {
		padding-left: 0;
		padding-right: 0;
	}

	#site-navigation .sub-menu {
		position: relative;
		display: block !important;
		padding: 0 0 0 20px;
		margin: 0;
		border: 0;
		top: auto;
	}

	.site-header .sub-menu-toggle,
	.site-header .sub-menu::before,
	.site-header .sub-menu::after {
		display: none !important;
	}
}

If you’d like to support our plugin, there’s a donate button on the Twentig WordPress plugin page just below the “View support forum” button.

I hope the above is useful to you.
Tom