[Resolved] Using Generate Press As Two Different Themes

[Bobby]

Hi Tom,

I have quite an odd question. Eventhough I know Generate Press is a responsive theme, I’m still trying to use it as if it’s not….but dont ask me why? LOL.

Here’s my scenario…I’m trying to use a second copy of generate press for the mobile version of my site. So I have the first, orginal copy loaded for the desktop look and I’m trying to customize a second copy for the mobile look. Im using a mobile theme switcher plugin to do this. My problem is…when I remove the right sidebar from the second mobile version of GP, it also removes the right sidebar from my desktop copy. I don’t understand why because I have both themes named differently to function separately. One copy is named just “Generate Press” and and second mobile copy is named “Generate Press Mobile.” I even changed the names on the style sheets. How can I make these two copies function and look separately?

Thanks

[Tom]

Hi there,

The GP settings are stored inside a specifically named option inside the DB, which is why the two themes are sharing the settings.

You would have to use a function in that second theme: https://docs.generatepress.com/article/sidebar-layout/#using-a-function

Any particular reason you’re using two separate theme folders instead of just tweaking the one theme on mobile?

[Bobby]

Hi Tom,

I basically run different ad networks between desktop version and mobile version and when the sidebar drops down under the post, I do not want to show the content in the sidebar. I know I probabably could use css queries, but I did not feel like learning it and setting it all up.

I just want to remove the right sidebar totally on the mobile version. I think that would solve my problem.
I did a css “display: none” on the sidebar….it removed the sidebar, but the sidebar space area is still there.

How can I remove the sidebar and also have the main post content stretch over to full width? Do you know of a quick php function that would do this?

Thanks.

[Tom]

Hi there,

Try this:

@media (max-width: 768px) {
    .sidebar {
        display: none;
    }
    .content-area {
        float: none;
        width: 100%;
        left: 0;
        right: 0;
    }
}

[Bobby]

That worked perfectly. Thanks so much Tom.

[Tom]

You’re welcome 🙂

[Roman]

Hi Tom, what about if I have two sidebars and the content like 55-20-25% and I want to hide sidebars at two different breakpoints respectively while mainteining the visible part 100% width? For example:

above 1300px 55-20-25
@1300px 75-0-25
@760px 100-0-0

Thanks
Roman

[Tom]

Hi Roman,

You would do something like this:

@media (max-width: 1300px) {
    .content-area.grid-55 {
        width: 75%;
    }
    #left-sidebar {
        display: none;
    }
}

@media (max-width: 760px) {
    .sidebar {
        display: none;
    }
}

[Roman]

Hi Tom,

Thank you for your suggestions. Actually I went with something like this for better responsiveness control:

@media screen and (max-width: 1395px) {
      .widget-area.grid-20 {
            width: 21%; 
      }
      .widget-area.grid-25 {
            width: 25%; 
      }
      .content-area.grid-55 {
            width: 54%; 
      }
}

@media screen and (max-width: 1335px) {
      .widget-area.grid-20 {
            width: 20%; 
      }
      .widget-area.grid-25 {
            width: 26%; 
      }
      .content-area.grid-55 {
            width: 54%;
      }
}

@media screen and (max-width: 1200px) {
      .widget-area.grid-20 {
            display: none; 
      }
      .widget-area.grid-25 {
            width: 30%; 
      }
      .content-area.grid-55 {
            width: 70%;
      }
}

@media screen and (max-width: 1000px) {
      .widget-area.grid-20 {
            display: none; 
      }
      .widget-area.grid-25 {
            display: none; 
      }
      .content-area.grid-55 {
            width: 100%;
      }
}

Now I wonder how to move sidebars under main content at particular breakpoints and maybe combine this approach with a/m code.

Thank you again
Roman

[Tom]

Forcing the sidebars below content can be done like this:

.sidebar,
.content-area {
    float: none;
    width: 100%;
    left: 0;
    right: 0;
}

[Author]

Posts