Different block designs for desktop and mobile

Hi Carsten,

GenerateBlocks allow users to specify Spacing, Backgrounds and Effects settings for Desktop, Tablet and Mobile.

Color and Typography will follow once the rest of the major updates get settled. ??

For now, the workaround is still custom CSS. ??

(GenerateBlocks is set to merge with WP Show Posts this year. Please look forward to it)

Typography also already has responsive options.

The only thing that doesn’t have responsive options are colors, as those typically don’t change depending on the device.

Let me know if something else is missing (not color related).

Thanks! ??

Hi there, thank you both for your replies.
Where and how do I specify Spacing, Backgrounds and Effects settings for Desktop, Tablet and Mobile? I can’t find any options for that? If I switch to mobile preview the settings dosen’t change.

Here is the responsive design I have on desktop and mobile using media quiaries. As you can see I use a background image on desktop, but image blocks on mobile.
Is this possible by using responsive options in the editor instead, and how?

View post on imgur.com

View post on imgur.com

This is how it looks in the editor

View post on imgur.com

Thanks!

Hi Carsten,

When you select a GB block, the mobile/desktop/tablet button will show at the top of all the block options. By click on a specific device button, you can set different spacing or typography for different devices. https://www.screencast.com/t/sNDzUp11ntZV

By just seeing the screenshot, I’m not able to tell how you exactly using GB block on the page. If you can link us to the page, I might be able to give some suggestions.

Let me know ??

Hi Ying, thanks for the clarification, I see the device option now, for the container block. Apparantly the Background option does not change if you change device?

I think what’s confusing is that it looks like the image and the paragraph blocks are inside a GB container block because of the same blue square symbol of that block.

View post on imgur.com

View post on imgur.com

If I put image and paragraph blocks inside a GB container block, would the device option work?

Thanks

To clarify my previous statement. (I didn’t state it clearly, my bad)

Typography HAS a responsive setting BUT you can’t change the font-family for different viewports as the responsive setting is only for the font-size.

If you must have different font-family for different viewports, this’ll have to be specified with custom CSS.

I think what’s confusing is that it looks like the image and the paragraph blocks are inside a GB container block because of the same blue square symbol of that block.

I suggest using Gutenberg’s list view so you’re sure if the blocks are inside or outside of another block. Here’s what the list view is -https://share.getcloudapp.com/X6u82J42

If I put image and paragraph blocks inside a GB container block, would the device option work?

Consider using hide-on-mobile, hide-on-tablet and hide-on-desktop classes.

And have it set up like this:

Container Block with background
> Contents

Container Block without background
> Image
> Contents

For the “container block with background”, add hide-on-mobile on it’s additional css class(es) field on the block setting’s advanced tab.

For the “container block without background w/ image”, add hide-on-desktop hide-on-tablet on it’s additional css class(es) field on the block setting’s advanced tab.

This way, the Container block intended for desktop (the one w/ background) only displays on desktops and tablets while the container block intended for moble (the one with image block) only displays on mobile.

Hi Elvin, no problem, I can see that I myself have misunderstood some of the concepts about the container block, like you can enter the container settings by clicking the blue symbol ;-).

Thank you very much for your thorough walk through of how to set it up with the different classes.

I’m not aware of the hide-on-mobile, hide-on-tablet and hide-on-desktop classes, I only know of media quiries like @media screen and (max-width: 46.8em), and @media screen and (min-width: 46.8em), are these what you are refering to?

Thanks!

hide-on-desktop, hide-on-tablet and hide-on-mobile are built-in classes within GeneratePress.

It’s main purpose it what it says which are:

hide-on-desktop class hides the element on desktop.
hide-on-tablet class hides the element on tablet.
hide-on-mobile class hides the element on mobile.

And yes, these classes uses @media rules. If you’re curious as to what exactly do they look like as CSS, here’s how they are coded:

@media (max-width: 768px) {
	.hide-on-mobile {
		display: none !important;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	.hide-on-tablet {
		display: none !important;
	}
}

@media (min-width: 1025px) {
	.hide-on-desktop {
		display: none !important;
	}
}

“The only thing that doesn’t have responsive options are colors, as those typically don’t change depending on the device.

Let me know if something else is missing (not color related).”

I am trying to set a different color stop in the background gradient for tablet and mobile.
I’m new to Generate Blocks so maybe I’m missing something but I think it is not possible. It is color related but the stop position is something that can be device related.

Hi there,
that feature is included in GenerateBlocks Pro the Advanced Backgrounds allow you to set different backgrounds styles for responsive devices

Hi David,

Thanks. I’m using GB Pro but when I change the color or color stop in the tablet panel, the color is also changed in the Desktop panel. Is this a bug or am I doing something wrong?
I’m especially interested in setting a different color stop for different devices.

Hi there,

For colors, GB doesn’t have different settings for desktop or mobile.

So in your case, custom CSS would be needed.

As we are not allowed to answer questions related to the Pro version of plugin, please open a support ticket here in the future ??
https://generateblocks.com/support/

Thanks!