Reduce Shapely Sidebar Size

Shapely
1

Hello,

I have been working with the Shapely theme for a while now. I am struggling to reduce the sidebar size. I added a few ones of CSS to attempt to reduce the size but I was unable to yield any results. I greatly appreciate your help.

The sidebar is currently only available on one developmental page:
https://maxvogel.me/portfolio/florida-keys-architecture-wildlife/

Thank you,
Max

2

Hi,

Go to Appearance -> Customize -> Additional CSS and add this CSS Snippet in it,

.single-jetpack-portfolio #primary {
    width: 100%;
}
.single-jetpack-portfolio #secondary {
    display: none;
}

Let us know,

Thanks,
laranz.

3

Thank you, the CSS above can be used to adjust the sidebar size globally for al device on portfolio pages.

I used the following CSS to set the side bar to 20%:
.single-jetpack-portfolio #primary { width: 80%;}
.single-jetpack-portfolio #secondary { width: 20%;}

Two questions:

  1. How can I set the CSS for large sized device only (desktop browsers)? Currently it appears fine on a large scale devices but when viewed on a mobile device, it appears as an unpopulated space (the sidebar contents are set to only appear on desktop devices. See screenshot.
    I tried to using a if statement but was unable to yield any results:
    if (min-device-width: 1200px) {css}

  2. How can I set the function globally for all pages contain a right sidebar (not just portfolio pages).

I appreciate your support,
Max

4

Hi,

  1. Go to Appearance -> Customize -> Additional CSS and add this CSS Snippet in it,

Instead .single-jetpack-portfolio you can use .page-template-sidebar-right to target the right sidebar pages. You can use that without this CSS class too, just use primary and secondary.

  1. You can try this, Media Queries for Standard Devices | CSS-Tricks instead min-device-width you can use min-width so that it will reflect on the desktop browser too.

Let us know,

Thanks,
laranz.

5

You and those who maintain this forum are amazing!

Thank you for your help,
Max

6

Hi @maxvogel,

We’re happy that you’re happy. :slight_smile:

Let us know if you have any other questions.

Thanks,
laranz.