Get Started

How to Make WPCodeBox Full-Width with SCSS

Learn how to make WPCodeBox full-width using SCSS with this helpful snippet. This guide provides the CSS code and instructions to ensure your WPCodeBox elements display correctly in a full-width layout, enhancing your website’s design and user experience.


#wpadminbar,
#adminmenumain,
#wpfooter {
	display: none !important;
}

#root {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100%;
	height: 100vh;
	min-height: 100vh;
	max-height: 100vh;
	background: var(--main_bg);
	
	.App > div {
	    margin: 0px;
	    height: 100%;
	    
	    .edit-snippet-wrap {
	        height:100%
	    }
	    
        #acs-editor {
            height: calc(100vh - 50px) !important;
            
            * {
        		-ms-overflow-style: none;
        		scrollbar-width: none;
        		backface-visibility: hidden;
    	    }
    
        	*::-webkit-scrollbar {
        		-webkit-appearance: none;
        		width: 4px;
        	}
    
        	*::-webkit-scrollbar-track {
        		background: #31373c;
        	}
    
        	*::-webkit-scrollbar-thumb {
        		background: hsl(0, 0%, 53%);
        		box-shadow: inset 0 0 0 1px #24292e;
        		border-radius: 20px;
        	}
        }
	}
}

#x91-back {
    display: grid;
    place-content: center;
    // background: #24292e; // left placement
    background: #3d4348; // right placement
    position: absolute;
    // left: 10px; // two left columns
    right: 13px; // columns on each side
    bottom: 16px;
    border-radius: 4px;
    color: white;
    padding: 8px 16px;
    font-size: 0.73rem;
    font-weight: 600;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform 200ms;
    text-decoration: none;
    
    &:hover {
        transform: translateY(-2px);
        transition: transform 200ms;
    }
}