Support » Theme: Storefront » I want a 1 Column Mobile Sidebar

  • Resolved Dr. John Elcik

    (@jelcik)


    The Theme sidebar (pages & posts) has 1 column on PC and 2 columns on iPad. How do I make it one column for both? I can understand why the mobile version might reduce the number of columns, but increasing them from 1 to two makes little sense. At least this is true for me. Having one column with a larger width is better than two narrow columns for my content. I am not selling products. Please, How do I get the mobile display to show one column in the sidebar? I really appreciate any help you can provide. – John

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • It looks like there are some custom styles applied to the widgets to have them display in a grid. When I take those out, it lines up in one column like the default does:

    grid

    
    @media only screen and (min-width: 652px) {
    .widget-area {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        column-gap: calc(2 * var(--global--spacing-horizontal));
    }
    }
    
    .widget-area {
        margin-top: calc(6 * var(--global--spacing-vertical));
        padding-bottom: calc(var(--global--spacing-vertical) / 3);
        color: var(--footer--color-text);
        font-size: var(--footer--font-size);
        font-family: var(--footer--font-family);
    }
    
    .site-header, .site-main, .widget-area {
        padding-top: var(--global--spacing-vertical);
        padding-bottom: var(--global--spacing-vertical);
        margin-left: auto;
        margin-right: auto;
    }
    
    .widget-area, .site-header {
        max-width: var(--responsive--alignwide-width);
        margin-left: auto;
        margin-right: auto;
    }
    
    Thread Starter Dr. John Elcik

    (@jelcik)

    Wonderful solution, Thank you very, very much!

Viewing 2 replies - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.