Generateblocks breakpoint fix

Here is CSS to fix the ridulously wide mobile breakpont in generateblocks. Generateblocks by default goes to mobile single column view at around 760 px width. That is too wide and you can’t adjust this breakpont in the free version. Therefore we can make adjustments with CSS to keep living in the free world.

This is the CSS to fix a grid layout

@media (max-width: 823px) {
	div:has(> .grid-fix){
		max-width:720px;
		margin-left:auto;
		margin-right:auto;
	}
    .grid-fix {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 550px) {
	div:has(> .grid-fix){
		max-width:480px;
		margin-left:auto;
		margin-right:auto;
	}
    .grid-fix {
        grid-template-columns: 1fr;
    }
}

You need the above CSS at the ned of your CSS. You also need to give the grid element a class attribute ‘grid-fix’. For the css above to work the grid must be inside a container since the CSS also targets the parent element of the grid element.

This is the CSS to fix a flexbox layout

@media (max-width: 823px) {
	
    .gb-flex-fix > div{
			width: 48%;
        
    }
}

@media (max-width: 550px) {
	
    .gb-flex-fix > div {
        width: 98%;
    }
}

NOTE! The flexbox container must have the gb-flex-fix class:

This results in a two column flexbox until the specified breakpont in the CSS above (550 px)

Two columns at 567 px width:

Single column at 505 px width:

Note, the aspect ratio of these flex boxes is still pretty wide. You can counter this by trying height:auto and / or adjusting the max-width of the flexbox items when the 550px brealpoint is active.