0
Welcome Guest! Login
0 items Join Now

SOLVED Any easiest way to customize responsive blocks ?

    • Arnaud's Avatar
    • Arnaud
    • Sr. Rocketeer
    • Posts: 232
    • Thanks: 3

    SOLVED Any easiest way to customize responsive blocks ?

    Posted 4 years 6 months ago
    • Hi Rocket Team,

      After several websites done using Gantry, my experience is that I spend a LOT of time setting the way blocks will react to responsive design, using my own CSS.

      Let's take this simple example :
      In some outline, I can insert for instance 5 Custom HTML particles in one row. Each of them will be using some 20% width by default.
      Now let me reduce the browser window : those 5 blocks will get smaller and smaller (until they even get far too small), and when reaching the tablet menu breakpoint, they will get on top of each other, each one using a 100% width. This is what I would call "theoretical responsive design".

      But in real life, what I mostly need to do is more like :

      1 + 2 + 3 + 4 + 5

      becoming

      1 + 2 + 3
      4 + 5

      and then

      1 + 2
      3 + 4
      5

      and only then

      1
      2
      3
      4
      5


      See what I mean ?
      So here is why I spend a lot of time on this.
      Is there anything that I missed and that could help me saving some precious time ?

      Thanks for your help and recommandations !
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Any easiest way to customize responsive blocks ?

    Posted 4 years 6 months ago
    • Nope, that's what we have to do in the template CSS if we want anything other than the 1+2+3+4+5 desktop or the 1,2,3,4,5 stacked vertically in mobile view.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • Arnaud's Avatar
    • Arnaud
    • Sr. Rocketeer
    • Posts: 232
    • Thanks: 3

    Re: SOLVED Any easiest way to customize responsive blocks ?

    Posted 4 years 6 months ago
    • Mark,

      Thank you very much for your fast answer.
      At least now I know I'm not only wasting my time with this…

      Oh, since I started this, can I ask you about something else ?
      Very different topic, but I think it's a short one.
      I'm still very unsure about the role of these "Process Twig" and "Process shortcodes" checks in each Custom particle.
      Is that possible to get a short explanation about these ?
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Any easiest way to customize responsive blocks ?

    Posted 4 years 6 months ago
    • Well yes. If you tick the "process shortcodes" box then you will be able to use shortcodes in the customhtml content (for whatever plugin provides shortcodes). If you tick the "process twig" then you will be able to use TWIG code in the customhtml content.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • Arnaud's Avatar
    • Arnaud
    • Sr. Rocketeer
    • Posts: 232
    • Thanks: 3

    Re: SOLVED Any easiest way to customize responsive blocks ?

    Posted 4 years 6 months ago
    • Oh ok, thanks. I had no idea what shortcodes and Twig codes were, so I couldn't figure it out.

      I noticed that whenever I use inheritance on a block, those 2 elements are checked by default within the child particle. Is that to make sure the inheritance will work if I change the parent particle ?
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Any easiest way to customize responsive blocks ?

    Posted 4 years 6 months ago
    • Those two options are totally unrelated to inheritance. If when you create a customhtml particle those two options are checked it means that you have those options check on the "particle defaults" tab of the base outline, or, that ht particle you are inheriting from already has those two options checked. Make sure that you are looking in the right place too. The checkmarks on the far right are for the creation of an OVERRIDE the actual checkmark for those two options appears just after the labels.

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
    • Arnaud's Avatar
    • Arnaud
    • Sr. Rocketeer
    • Posts: 232
    • Thanks: 3

    Re: SOLVED Any easiest way to customize responsive blocks ?

    Posted 4 years 6 months ago
    • Yes, right, what is checked in the child particle is the Override one, not the actual check.
      Even tho this Override mark is not checked in the parent particle.
      Is there a reason for this ? (I know, no big deal, just being curious).
    • MrT's Avatar
    • MrT
    • Preeminent Rocketeer
    • Posts: 101084
    • Thanks: 13481
    • Web Designer/Developer

    Re: SOLVED Any easiest way to customize responsive blocks ?

    Posted 4 years 6 months ago
    • The override checkmark will be checked if the field content are different from the particle defaults or the inherited particle fields (either or both).

      Regards, Mark.
    • Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.

Time to create page: 0.054 seconds