• Author
    Posts
  • #879
    Aron Prins
    Keymaster

    This little piece of CSS shows your funnel pages in rows of four on desktop, and underneath each other in full width on mobile phones for the best ui/ux experience:

    @media screen and (min-width: 720px) {
    	.wp-block-column {
    		background-color: #ffffff;
    		border-radius: 10px 10px 10px 10px!important;
    		overflow: hidden!important;
    		border-width: 1px;
    		border-color: #b1b1b1;
    		padding-top: 0px;
    		padding-right: 0px;
    		padding-bottom: 0px;
    		padding-left: 0px;
    		margin-top: 10px;
    		margin-right: 10px;
    		margin-bottom: 10px;
    		margin-left: 10px;
    		box-shadow: inset 0px 0px 10px 0px rgb(0 0 0 / 30%);
    		width: 31.5%;
    		border: 1px solid #333333;
    		box-shadow: inset 0px 0px 10px 0px rgb(0 0 0 / 30%)
    	}
    	
    	.wp-block-column:hover {
    		border: 1px solid #FFAA00;	
    	}
    }

    Enjoy!
    Cheers,
    Aron

Viewing 1 post (of 1 total)
  • You must be logged in to reply to this topic.