Reduce Sidebar Width, Exhibit Theme

Store Design
,
1

Hello, I am currently using the theme Exhibit, and this is the smallest width it allows my sidebar to be. Could anyone tell me how I can make this less wide? Maybe in the code? Thank you!

website is : edenitl.com

pass: supermans

sidebar.PNG
sidebar.PNG1888×873 94 KB

2

Hi @johndotpark ,

To make the sidebar less wide in the Exhibit theme on Shopify, you can adjust the grid layout by modifying the CSS code. Here’s a step-by-step guide on how to do it:

Modify the Grid Template Areas

In your existing CSS, you have defined the grid layout using --main-grid-areas. The sb represents the sidebar, and the rest is for the content (ct). To make the sidebar narrower, you need to allocate fewer columns to the sidebar.

Here’s an example of how to reduce the sidebar width:

@media (min-width: 990px) {
    .main-site-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr) repeat(11, 1fr); /* Adjust the number of columns */
        grid-template-rows: var(--main-grid-rows);
        grid-template-areas: "sb ct ct ct ct ct ct ct ct ct ct ct";
    }
}

Explanation:-

grid-template-columns:

In the original code, each ct takes up one column, and sb likely takes up multiple columns. By specifying repeat(2, 1fr), you are setting the sidebar to take up 2 columns (making it smaller) and the content to take up the remaining 11 columns.

grid-template-areas:

This remains mostly the same, but it will now reflect the reduced width of the sidebar.

Apply the Changes

To apply these changes:

Go to your Shopify admin panel.

Navigate to Online Store > Themes > Edit Code.

Locate the CSS file where you have your custom styles or the main CSS file of your theme.

Paste the modified code snippet at the bottom or in the appropriate media query section.

Save the changes.

Sweans_0-1724818567090.png
Sweans_0-1724818567090.png1902×952 123 KB

This will reduce the width of the sidebar on screens that are 990px or wider. You can further tweak the numbers in grid-template-columns to adjust the width according to your preference.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,

Sweans

3

Hi @johndotpark , kindly use the below code:

  1. Go to Online Store → Theme → Edit code.
  2. Open your theme.liquid file
  3. In theme.liquid, paste the below code before 
@media (min-width: 990px) {
    .main-site-grid {
        display: grid;
        grid-template-columns: max-content !important;
        grid-template-rows: var(--main-grid-rows);
        grid-template-areas: var(--main-grid-areas);
    }
}

Results:

topnewyork_0-1724829219752.png
topnewyork_0-1724829219752.png1352×642 230 KB

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

4

I only see this code in the sidebar.liquid code, not theme.liquid, and when I paste it in the sidebar.liquid, it doesn’t work

5

does not do anything in the theme.liquid file but can see it in sidebar.liquid file, still doesn’t work though.

6

Hi @johndotpark ,

To adjust the sidebar’s appearance, you’ll need to add the following CSS code directly within the sidebar.liquid file using Liquid tags. Insert the code like this:

{%- style -%}
@media (min-width: 990px) {
    .main-site-grid {
        display: grid;
        grid-template-columns: max-content !important;
        grid-template-rows: var(--main-grid-rows);
        grid-template-areas: var(--main-grid-areas);
    }
}
{%- endstyle -%}

This will ensure that the CSS is properly applied when the screen width is 990px or wider.

I hope this helps! If it does, please like it and mark it as a solution!

If you need further assistance, feel free to reach out!

Regards,
Sweans