G-blocks in grids do not seem to be responsive

  • Resolved perpetual.design

    (@perpetualdesign)


    7 years, 11 months ago

    I’ve noticed a quirk on some sites I use Gantry 5 with. If you build a row with the blocks sized next to each other (for example, three 33.33% blocks), they won’t act responsively.

    Looking at the CSS, the class has is set up as follows:

    .size-33-3 {
    max-width: 33.3333%;
    width: 33.3333%;
}

    If you set max-width to none, the layout becomes responsive again while still retaining the appropriate size on desktop views. Why is this CSS set by default? Is there an option I’m missing in the layout manager to turn this off so we don’t have to override the CSS?

Viewing 13 replies - 1 through 13 (of 13 total)
  • Plugin Author Gantry

    (@gantry)

    Hi,

    These values are proper and I don’t see a reason why they wouldn’t work responsively when they are percentage values.

    Can you please show me the example layout or provide a link to your site where you have this issue?

    Thanks,
    Jakub

    Thread Starter perpetual.design

    (@perpetualdesign)

    Sorry I took so long to reply!

    hardee family medicine

    There’s the link. Currently, the blocks are responsive since I override them in my custom stylesheet.

    Plugin Author Gantry

    (@gantry)

    You basically want to have fixed width on your site right?

    Thread Starter perpetual.design

    (@perpetualdesign)

    On desktops. Smaller breakpoints need to fill the column on this home page.

    Fixed width/max width on smaller screens makes all the columns really tall and skinny.

    Plugin Author Gantry

    (@gantry)

    What’s the exact effect you want to achieve? Can you post me a screenshot?

    Thread Starter perpetual.design

    (@perpetualdesign)

    Responsive vs. non responsive.

    This image is what I want. I have to explicitly state that these g-block columns are not fixed-width for class .size-33-3. Why?

    If I don’t override this property with ‘none’, then the columns are not responsive and become too ‘tall’ and squashed.

    Thread Starter perpetual.design

    (@perpetualdesign)

    Bump?

    Plugin Author Gantry

    (@gantry)

    You’re using Nucleus engine builtin into Gantry (you can disable it, but it provides the styling for many core elements and this would force you to implement your own sort-of engine) which is a responsive engine, thus the classes like size-33-3 to adjust the content of your site to the viewport size.

    The viewport size you’re asking about is a mobile view range. Can you please tell me what value you have set for the Mobile Breakpoint in Theme Settings > Style.

    Depending on that value Nucleus should force max-width: 100%; instead of the 33.3% value that you have on your site.

    Thanks,
    Jakub

    • This reply was modified 7 years, 10 months ago by Gantry.
    • This reply was modified 7 years, 10 months ago by Gantry.
    • This reply was modified 7 years, 10 months ago by Gantry.
    Thread Starter perpetual.design

    (@perpetualdesign)

    I kept the default values. I like them. I just wonder why fixed-width is there, seemingly, be default. It’s the property that’s giving me the most trouble.

    Plugin Author Gantry

    (@gantry)

    By fixed width you mean 33.3%? Because you have set your content into 3 columns and this is the proper behavior. When the mobile breakpoint hits (set to 30rem on my screenshot) the code should auto switch from max-width: 33.3%; to max-width: 100%; filling the whole width without any additional CSS modifications. If it’s not doing this, then this means that something is set up wrong.

    Thread Starter perpetual.design

    (@perpetualdesign)

    Oh! Does it do this via Javscript? Or CSS media queries, with an override? What properties could I accidentally override it to break it like this? In the inspector, it doesn’t show it being overridden…

    Plugin Author Gantry

    (@gantry)

    It’s all being driven by CSS and media queries. That’s why it’s important to have these breakpoints values set ??

    This is piece of code that handles it :

    
body [class*="size-"] {
	@include breakpoint(mobile-only) {
        @include flex-grow(0);
        @include flex-basis(100%);
        max-width: 100%;
	}
}

    If you want to, you can contact me on Gitter (@newkind) chat and give me your admin access so I could take a look.

    Jakub

    Thread Starter perpetual.design

    (@perpetualdesign)

    We fixed this – some old css was cached! – in Gantry, I believe (or perhaps a caching plugin). Recompiling the CSS in Gantry fixed my issue. Thanks!

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘G-blocks in grids do not seem to be responsive’ is closed to new replies.