Himanshu Chudasama

Hi @memerunner,

You can set the first column width to 2/3 and the second to 1/3 by changing the width of the specific column from the right sidebar.

For example, you need to select a specific first column, and in the right sidebar, you have the option to enter a width for the column. so enter the width you want for the first column. Like in your case, the first column width should be 67%. The same holds true for the second column. The second column width should be 33%.

Add below CSS in your themes CSS file to align center blog.

div#blog-box.innerpage-whitebox{
	display: block;
	float: none;
	margin: 0 auto;
}

Hi @thecause12,

You just need to add the below code at the top of your page template.

/**
 *    Template Name: name-of-your-template
 **/

Hi @neilj01,

You can also try the below CSS, and this doesn’t affect your footer in responsiveness like in mobiles and tablets it doesn’t break your footer design.

#cb-row--footer-bottom{
    background-color: #004687;
}
#cb-row--footer-bottom .footer--row-inner{
    margin: 0 2rem;
}

#cb-row--footer-bottom.footer-bottom .customify-container{
    padding: 0;
}

Hi @jessmfelt,

Add the below CSS to your CSS file to fix this issue on mobile as well as desktop.

.modern-grid{
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1em;
    row-gap: 1em;
}
.modern-grid .grid-item{
    opacity: 1 !important;
}

/* This css fix product layout in Tablets  */
@media (max-width: 980px){
    .modern-grid{
        grid-template-columns: repeat(2, 1fr);
        column-gap: 1em;
        row-gap: 1em;
    }
}

/* This css fix product layout in mobiles  */
@media (max-width: 600px){
    .modern-grid{
        display: block;
    }
}

Hi @iwanuma,

This white space is due to added margin to the .page class added in the body. you just need to add this CSS to remove that white space.

.page{
	margin-top: 0;
}

Hi @sbreske,

Add below CSS to your themes style.css file to fix the issue.

@media (min-width:1280px) {
	.MainNav__Menu--level-1 { justify-content: center; }
	.MainNav__Item--level-1 { display: flex; }
	.MainNav__Link--level-1 { white-space: normal; word-break: break-word; padding-right: 10px; padding-left: 1rem; }
	.MainNav__Item--level-1 .MainNav__HomeLink { padding-right: 1.5rem; }
	.MainNav__Item--has-submenu .MainNav__Link--level-1 { padding-right: 6px !important; }
	.MainNav__LinkText, .MainNav__HomeLink__Text { word-break: normal; white-space: nowrap; }
}

• This reply was modified 2 years, 12 months ago by Himanshu Chudasama.

Hi @jadebartholomew,

As I understand you are using UNCODE theme. when you inspect the page, uncode-icons.woff this fonts file was missing, which contain all icons used on your site. File path is wp-content/themes/uncode/library/fonts/uncode-icons.woff. so contact your theme support to resolve the error.

You can reach support team from here UNCODE theme support

Hi @kaizertsosane,

Please add the below CSS to align the products with responsiveness.

@media screen and (min-width: 1040px){
	ul.products li.product a.product-image{
		height: 170px;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}
}

@media screen and (max-width: 1040px) and (min-width: 769px) {
	ul.products li.product a.product-image{
		height: 370px;
		display: flex !important;
		align-items: center;
		justify-content: center;
	}

	ul.products{
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
	}

	ul.products li.product{
		margin-left: 0;
	    margin-right: 12px !important;
	    width: 47% !important;
	}
}

• This reply was modified 2 years, 12 months ago by Himanshu Chudasama.

Hi @ilmman,

To increase the width of the logo, you need to increase the max-height from 59px to whatever logo size you need as below :

.bwp-header .wpbingoLogo img {
    max-height: 80px;
}

Hi @sheilaob,

You just need to add this CSS to bottom of your themes style.css file.

@media screen and (min-width: 1001px){
	.nav ul{
		display: flex;
		flex-wrap: wrap;
	}
	.nav li{
		max-width: 25%;
		width: 100%;
		line-height: normal;
	}
	.orange .primarymenu-section a{
		padding: 0;
		margin: 0 20px 10px;
		line-height: normal;
	}
}

Also, if you want your menu text alignment in center on desktop then add this CSS in style.css file:

@media screen and (min-width: 1001px){
	.orange .primarymenu-section a{
		text-align: center;
	}
}

• This reply was modified 3 years ago by Himanshu Chudasama.

Hi @naftiaziz,

You just need to add this CSS to fix the slider design.

.program-page .location-section.process .content-widget .content .process-carusel .slick-list .slick-track .slick-slide .image { height: auto; }
@media screen and (min-width:768px) and (max-width:1200px) {
	.program-page .location-section.process .content-widget .content .process-carusel .slick-list .slick-track .slick-slide .image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
	.program-page .location-section.process .content-widget .content .process-carusel .slick-list .slick-track .slick-slide .content p { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
}
@media screen and (min-width:768px) {
	.program-page .location-section.process .content-widget .content .process-carusel .slick-list .slick-track .slick-slide .image img { height: auto; }
}
@media screen and (max-width:768px) {
	.program-page .location-section.process .content-widget .content .process-carusel .slick-list .slick-track .slick-slide { width: 90% !important; margin: 0 auto; }
}
@media screen and (max-width:576px) {
	.program-page .location-section.process .content-widget .content .process-carusel .slick-list .slick-track .slick-slide { width: 88% !important; }
}
@media screen and (max-width:470px) {
	.program-page .location-section.process .content-widget .content .process-carusel .slick-list .slick-track .slick-slide { width: 81% !important; margin: 0 auto; }
}

By adding the above CSS your slider looks like https://imgur.com/BZrtAgX