Archived topic
Using Generate Press As Two Different Themes
9 replies · Started by Bobby on April 20, 2017
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
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?
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.
Hi there,
Try this:
@media (max-width: 768px) {
.sidebar {
display: none;
}
.content-area {
float: none;
width: 100%;
left: 0;
right: 0;
}
}That worked perfectly. Thanks so much Tom.
You're welcome :)
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
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;
}
}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
Forcing the sidebars below content can be done like this:
.sidebar,
.content-area {
float: none;
width: 100%;
left: 0;
right: 0;
}