Full-width blocks on mobile

Hi @4blkstars,

The easiest way would be to just apply the “Full” alignment to the block. Or do you want it to have the full alignment on mobile, and a different alignment on larger screens?

— Anders

@anlino,

Yes. It would be different alignment depending on the screens. I would only want to remove the margins on a few blocks for example a background color applied to a group could be set to full-width on mobile and its normal width on larger screens.

@4blkstars There’s no built-in support in WordPress for different alignments at different screen sizes. There might a plugin for it, but I’m not aware of one.

You could use the Block Visibility plugin, create two blocks, make one of them visible on mobile and one on tablet + desktop.

Thank you @anlino

i’m trying to avoid TOO many plugins and rather find coding alternatives. I would assume the best solution would be to find the correct code and apply something custom instead of using the built in style that way it fills the screen on specific places via mobile.

@4blkstars You could add a custom class like alignfull-mobile to the block you want to have a full alignment on mobile, and then add the following custom CSS:

@media ( max-width: 768px ) {
	.entry-content > .alignfull-mobile {
		margin-left: calc( 50% - 50vw + ( var( --eksell-aside-width ) / 2 ) );
		max-width: calc( 100vw - var( --eksell-aside-width ) );
		width: calc( 100vw - var( --eksell-aside-width ) );
	} 
}

Adjust the 768px value to determine the maximum screen size width for the styles.

@anlino this doesn’t work for me. I added the full-width-mobile code to an inner block on (cover) and nothing. Could I be doing something wrong?

@4blkstars The code above will only work on blocks added as direct descendants to the content, not on child blocks. For a child block, you’d need specific CSS for that specific block due to the variability of the spacing on the parent blocks.

THANKS @anlino

i’ll find a workaround