How to customize Ella theme layout page width on homepage to any size. e.g 1400px

[esmoent]

I want to customize my Ella theme page layout width. It is either too wide or too narrow the default width. I want it to fall between 1500px and 1300px.

Please, find attached screenshot of my page.

[BSSCommerce-HDL]

Hi @esmoent , Can you kindly share the details of your problem (page link) with us? We will check it and suggest you a solution if possible.

[esmoent]

The URL is https://esmoshops.com

[BSSCommerce-HDL]

Hi @esmoent ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css or styles.css

Step 3: Insert the below code at the bottom of the file → Save

@media only screen and (min-width: 768px) {
   .container-full:has(.halo-block-content) {
    padding-left: 100px !important;
    padding-right: 100px !important;
   }
}

Here is result:
Only for desktop:

Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it asa solution. Thank you

[esmoent]

The Code works. Thank you.

[esmoent]

Thank you so much. It works. Very much appreciated BSSTech-Venture.

[BSSCommerce-HDL]

Hi @esmoent , this code customize for your navigation bar

.menu_open .halo-sidebar.halo-sidebar_menu, .menu-heading-mobile.halo-sidebar-header {
    background-color: black !important;
}

.halo-sidebar_menu .site-nav-mobile .list-menu .menu-lv-item {
   border-bottom: 1px solid black !important;
}

.halo-sidebar_menu .site-nav-mobile .list-menu .menu-lv-item a, 
.menu-heading-mobile.halo-sidebar-header span,
.site-nav-mobile.nav-account .last-link
{
    color: #ffff !important;
}

button.halo-sidebar-close svg, 
.halo-sidebar_menu .site-nav-mobile .list-menu .menu-lv-item .icon-dropdown svg,
.site-nav-mobile.nav-account .last-link .icon-wrapper svg
{
    fill: #ffff !important;
}

.site-nav-mobile.nav-account .header__icon,
.site-nav-mobile.nav-account .last-link
{
    border: none !important;
}

.menu_open .halo-sidebar.halo-sidebar_menu {
    border: 1px solid gray !important;
}

.site-nav-mobile ul.header__submenu.list-menu.list-menu--disclosure {
    background-color: black !important;
}

.nav-title-mobile {
    background-color: black !important;
    color: #fff !important;
}

Here is result:

Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[esmoent]

Perfect. It worked. Thank you so much. But there is a white thin borderline on the left and right sides of the navigation bar, can you remove them?

[BSSCommerce-HDL]

Hi @esmoent , Do you mean this one?

[esmoent]

Yes please, and when you close the menu for a second as it closes, it changes to white

[BSSCommerce-HDL]

Hi @esmoent , Pls replace my old code to this new code:

.menu_open .halo-sidebar.halo-sidebar_menu, .menu-heading-mobile.halo-sidebar-header {
    background-color: black !important;
}

.halo-sidebar_menu .site-nav-mobile .list-menu .menu-lv-item {
   border-bottom: 1px solid black !important;
}

.halo-sidebar_menu .site-nav-mobile .list-menu .menu-lv-item a, 
.menu-heading-mobile.halo-sidebar-header span,
.site-nav-mobile.nav-account .last-link
{
    color: #ffff !important;
}

button.halo-sidebar-close svg, 
.halo-sidebar_menu .site-nav-mobile .list-menu .menu-lv-item .icon-dropdown svg,
.site-nav-mobile.nav-account .last-link .icon-wrapper svg
{
    fill: #ffff !important;
}

.site-nav-mobile.nav-account .header__icon,
.site-nav-mobile.nav-account .last-link
{
    border: none !important;
}

.site-nav-mobile ul.header__submenu.list-menu.list-menu--disclosure {
    background-color: black !important;
}

.nav-title-mobile {
    background-color: black !important;
    color: #fff !important;
}

.site-nav-mobile .list-menu {
    background-color: black !important;
}

Here is result:

Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[esmoent]

I like the result. Thank you. Just a minor issue, when you are closing the menu bar, half of the lower menu turns white. If you can work on it. it will be deeply appreciated. Thank you

[BSSCommerce-HDL]

Hi @esmoent , Pls insert add this code to your file css:

.halo-sidebar-wrapper.custom-scrollbar {
    background-color: black !important;
}

Hope it work!!