[Resolved] responsive layout is not working with flexbox

Home Forums Support responsive layout is not working with flexbox

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

    #1434640
    Leo
    Staff
    Customer Support

    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 🙂

    #1434654
    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

    #1434659
    Leo
    Staff
    Customer Support

    I can’t get that to happen using Chrome.

    Does it happen on every browser for you?

    Have you tried browser incognito mode?

    #1434683
    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

    #1434691
    Leo
    Staff
    Customer Support

    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.

    #1434708
    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

    #1434845
    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

    #1435009
    David
    Staff
    Customer Support

    Hi there,

    can you try adding this CSS and let us know:

    .site-content .content-area {
        min-height: 0;
    }
    #1435051
    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

    #1435103
    David
    Staff
    Customer Support

    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.

    #1435162
    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

    #1435163
    David
    Staff
    Customer Support

    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.

    #1435857
    Tom
    Lead Developer
    Lead Developer

    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!

    #1436077
    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

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.