Mengatur Lebar Home Sectin Shura Pro

Berikut panduan untuk mengatur lebar section ada theme wordpress Shurapro

Default theme shurapro itu lebarnya di 1024px, mungkin beberapa pengguna ingin melakukan perubahan lebar theme shurapro ini, dan berikut adalah cara yang bisa dilakukan, yaitu menggunakan css tambahan / addtional css.

Pada customizer theme masuk ke menu addtional css, lalu tambahkan css berikut:

Mengatur lebar navbar/menu navigasi atas:

Khusus untuk lebar navigasi atas/navbar anda bisa mengaturnya melalui customizer – pengaturan theme – header – lebar navbar:

Mengatur lebar section iklan/ads:

*Silahkan atur nilai max-width 1366px dengan sesuai kebutuhan anda

@media (min-width: 1024px) {
  .site-ads-width .cnt {
		max-width: 1366px;
	}
}

Mengatur lebar ticker post:

*Silahkan atur nilai max-width 1366px dengan sesuai kebutuhan anda

@media (min-width: 1024px) {
	.site-ticker .cnt {
		max-width: 1366px;
	}
}

Mengatur lebar featured post style 1:

*Silahkan atur nilai max-width 1366px dengan sesuai kebutuhan anda

@media (min-width: 1024px) {
.site-featured.style1 .cnt {
		max-width: 1366px;
	}

	.site-featured-container.style1{
		display: grid;
		grid-template-columns: 2fr 1fr;
		grid-template-rows: 1fr 1fr;
		gap: 20px;
	}

	.site-featured-container.style1{
		height: 420px;
	}

	.site-featured-container.style1 .first-post{
		grid-row: 1 / span 2;
		height: 100%;
	}

	.site-featured-container.style1 article:nth-child(2),
	.site-featured-container.style1 article:nth-child(3){
		height: 100%;
	}

	.site-featured-container.style1 .site-featured-post{
		float: none !important;
		width: auto !important;
		margin: 0 !important;
		display: block !important;
		overflow: hidden;
		border-radius: 14px;
	}

	.site-featured-container.style1 .first-post{
		grid-row: 1 / span 2;
		height: 420px;
	}
}

Mengatur lebar featured post style 2:

*Silahkan atur nilai max-width 1366px dengan sesuai kebutuhan anda

@media (min-width: 1024px) {
	.site-featured.style2 .cnt {
		max-width: 1366px;
	}
	 .site-featured-container.style2{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .site-featured-container.style2 .site-featured-post{
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    display: block !important;

    overflow: hidden;
    border-radius: 14px;
  }
}

Lebar post circle:

*Silahkan atur nilai max-width 1366px dengan sesuai kebutuhan anda

	
	@media (min-width: 1024px) {
  	.site-post-circle .cnt {
  		max-width: 1366px;
  	}
	}

Lebar main post dan sidebar:

*Silahkan atur nilai max-width 1366px dengan sesuai kebutuhan anda, dan juga persentase 69% serta 29% nya.

@media (min-width: 1024px) {

	.site-main .cnt {
		max-width: 1366px;
	}

	.site-main-left {
		width: 69%
	}

	.site-main-right {
		width: 29%;
	}
}

Lebar post bottom:

*Silahkan atur nilai max-width 1366px dengan sesuai kebutuhan anda

@media (min-width: 1024px) {
	.site-post-bottom .cnt {
		max-width: 1366px;
	}
}

Sekian,