[Resolved] Using Generate Press As Two Different Themes

Home Forums Support Using Generate Press As Two Different Themes

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #308314
    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

    #308383
    Tom
    Lead Developer
    Lead Developer

    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?

    #308494
    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.

    #308618
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Try this:

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

    That worked perfectly. Thanks so much Tom.

    #308639
    Tom
    Lead Developer
    Lead Developer
    #312466
    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

    #312587
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #313247
    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

    #313253
    Tom
    Lead Developer
    Lead Developer

    Forcing the sidebars below content can be done like this:

    .sidebar,
    .content-area {
        float: none;
        width: 100%;
        left: 0;
        right: 0;
    }
Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.