[Resolved] responsive layout is not working with flexbox

[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
Deepak

[Leo]

Hi 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/SjbZNGLR

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Deepak]

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

View post on imgur.com

[Leo]

I 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/

[Deepak]

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

View post on imgur.com

[Leo]

Can 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/

[Deepak]

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
Deepak

[Deepak]

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
Deepak

[David]

Hi 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/

[Deepak]

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
Deepak

[David]

The 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/

[Deepak]

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
Deepak

[David]

We’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/

[Tom]

Hi 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-development

[Deepak]

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 bar

With 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

[Author]

Posts