- This topic has 15 replies, 4 voices, and was last updated 4 months, 2 weeks ago by
Leo.
-
AuthorPosts
-
September 7, 2020 at 7:17 pm #1434609
Deepak
Hi Team,
I have recently purchased GP and I am trying it on my staging site
I observed that with the alpha release + flexbox, the responsive layout is not working any more.If you shrink the browser width with my page open, you will observe that the header is shrinking perfectly but the right sidebar goes missing and you have to scroll right to see the right sidebar.
I switched back to Flat and the responsive design was working properly.Regards
DeepakSeptember 7, 2020 at 7:57 pm #1434640Leo
StaffCustomer SupportHi there,
Have you resolved this?
I just checked the linked page using browser resizing, Chrome mobile simulator and my phone but don’t see the issue at all – the page is responsive by default and the sidebar is moved to the bottom of the page on mobile:
https://postimg.cc/SjbZNGLRLet me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 7, 2020 at 8:12 pm #1434654Deepak
Hello Leo,
No the issue is still there.
If I open my page on mobile device then yes it works fine but the problem is seen if you minimize the browser width on desktop
Here is a screenshot
September 7, 2020 at 8:19 pm #1434659Leo
StaffCustomer SupportI can’t get that to happen using Chrome.
Does it happen on every browser for you?
Have you tried browser incognito mode?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 7, 2020 at 8:45 pm #1434683Deepak
Hello
I also verified on Firefox.
For homepage it doesn’t seem to happen but for other posts – YES
I created a short video using incognito mode in chrome
September 7, 2020 at 8:55 pm #1434691Leo
StaffCustomer SupportCan you disable all of your custom CSS and see if the issue is fixed that way?
I’m seeing some CSS related to the previous
grid
system which no longer exists in the new flexbox mode.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 7, 2020 at 9:24 pm #1434708Deepak
I have disabled all the custom css. Will keep it disabled till your next comment.
one more strange issue – if you observe closely
On homepage the right and left sidebar width is different but when I open a post, the width of both the sidebar shrinks slightly.
Regards
DeepakSeptember 8, 2020 at 12:52 am #1434845Deepak
FYI, I took a backup of my configuration, did a reset and still the issue was there
Please let me know if there is a possibility that this will be fixed as I am working on a new theme design for my site.
So accordingly I will choose the style. As I see most of my custom CSS from Floats do not work with Flexbox and vice versa.
It will be too much work for me to spend time working on both the style layouts.
Regards
DeepakSeptember 8, 2020 at 3:56 am #1435009David
StaffCustomer SupportHi there,
can you try adding this CSS and let us know:
.site-content .content-area { min-height: 0; }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 8, 2020 at 4:34 am #1435051Deepak
Hi David,
I have somehow managed to fix the issue by comparing the CSS style with Floats style
The main problem seem to be
.sidebar { min-width: XXXX; }
which I changed to
.sidebar { min-width: unset; }
Below are the additional list of CSS added and modified (I am using width 20% for both sidebars)
/* 1025 Start */ @media (min-width: 1025px) { .site-content .content-area { width: 60%; } } /* 1025 End */ /* Layout Adjustment Start */ @media (max-width: 1024px) and (min-width: 768px) { .site-content .content-area { width: 60%; float: left; left: 20%; } } @media (max-width: 1024px) and (min-width: 768px) { .is-left-sidebar { left: -60%; } .is-right-sidebar.sidebar { float: left; width: 20%; } } /* Layout Adjustment End */
At the moment the alignment looks proper, I am still testing. But I really feel this should be looked into and corrected in the main CSS style.
Thanks
DeepakSeptember 8, 2020 at 4:56 am #1435103David
StaffCustomer SupportThe min-height CSS i provided should stop the Flexbox from behaving badly on Firefox.
We’re still in alpha – so we really appreciate you testing and giving feedback – we will adjust the CSS accordingly.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 8, 2020 at 5:28 am #1435162Deepak
Thanks David. The problem seems to be the width to me, I tried your css but it didn’t help.
Do we have any time estimate by when we can have a stable release for 3.0
I am planning to export the theme to my production site if all looks good.
But I can wait if you guys are planning to release 3.0 soon as I would like to have a stable build.
Regards
DeepakSeptember 8, 2020 at 5:30 am #1435163David
StaffCustomer SupportWe’re still in Alpha – the changes we made are significant so we expect there to be at least a couple of weeks testing.
Odd – that code i provided i tested on your site in the Developers tools and it worked.
We will review what the best option is and update accordingly.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/September 8, 2020 at 2:45 pm #1435857Tom
Lead DeveloperLead DeveloperHi there,
alpha.3 is now available and should fix this issue: https://generatepress.com/generatepress-3-0-a-new-era/
Would be great if you could let us know π
Thanks!
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentSeptember 8, 2020 at 10:23 pm #1436077Deepak
Hello Tom,
Amazing, I did not expect such a quick fix. Thank you
I did a quick verification and looks good. I have removed my custom CSS and will verify some more with different sidebar layout.
There is another issue I observed though:
The search icon in the primary navigation bar doesn’t wok with following combination
Floats + Primary nav aligned to Center + Enable search in navigation barWith this setting if you click on search icon, it will disappear and we also don’t see close icon. But when I change the navigation alignment to left then the search icon works just fine
This is only with Floats, with FlexBox there are no issues
Please let me know if you want me to open a new thread for this issue
Regards
Deepak -
AuthorPosts
- You must be logged in to reply to this topic.