How do I make a cover block on desktop but not on mobile?

Hello @taw22ala ,

For the mobile devices, instead of cover, you can change it to “contain” in @media query.

Thank you, Varshil,

You definitely put me on the right track to get the look I want.

I placed the following CSS into the “Additional CSS” menu of customize.php:

@media screen and (max-width: 700px) {
	#page-cover-block {
		display: contents !important;
    }
}

However, this has caused another issue: the mobile navigation menu no longer works. The hamburger menu displays, but can’t be clicked.

The default break point for the mobile menu in Twenty Twenty-Two is ~768px so it is possible to narrow the browser width to the point that the mobile menu appears and verify that it is working properly, then further narrow the browser width until the background cover image disappears as effected by the @media query above and confirm that the mobile menu no longer works.

I’ve read several web articles regarding the usage of @media query, but I have yet understand the conflict with the mobile navigation menu.

I’m open to further suggestions.

Thanks,
taw

Hello @taw22ala,

Can you please provide the URL so that i can check further.

I don’t think that will work. It’s running on a “Local by Flywheel” installation and not a publicly accessible web server. I don’t have a staging site. I’m trying to learn as much as I can offline before going live on a production site. Nevertheless, the URL is: https://fbcwhiteplains.local

I will attempt to spin up a test site on “instawp” later this week to see if I observe the same behavior there and hopefully be able to test this on an real mobile device rather than narrowing the window of a desktop browser.

Thanks for your help.
-taw

**Update**
I believe I have replicated the issue on this test site: https://melodicbottle.s4-tastewp.com/

Some of my edits are not yet available on my mobile device, but I think that’s a caching issue. When the media query kicks in and changes the display mode of the cover block the navigation links in the header no longer work.

I hope this helps identify the issue.

Thank you,
-taw

I have found something that works, but there must be an easier way! It appears the cover block overlays the content with a transparent background layer (background-dim) which blocks clicking on links behind the layer.

@media screen and (max-width: 700px) {
	#page-cover-block {
		display: contents !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
    }
	.wp-block-cover-image.has-background-dim:not(.has-background-gradient)::before, .wp-block-cover-image .wp-block-cover__background, .wp-block-cover-image .wp-block-cover__gradient-background, .wp-block-cover.has-background-dim:not(.has-background-gradient)::before, .wp-block-cover .wp-block-cover__background, .wp-block-cover .wp-block-cover__gradient-background{
		opacity: 0;
		z-index: -1 !important;
	}
	.wp-site-blocks {
		padding-left: 0px;
		padding-right: 0px;
	}	
}

I’m concerned that the complexity of this custom CSS could come back to haunt me later.

Since my original question has been answered and I have a working resolution for the resulting problem of navigation links not working, I will mark this as resolved. However, I’m open to suggestions of a better resolution.

Thanks,
-taw