Easily overlap content with CSS Grid in Bricks Builder | WordPress Tutorial

Поділитися
Вставка
  • Опубліковано 21 гру 2024

КОМЕНТАРІ • 37

  • @amrfarrouh
    @amrfarrouh 11 місяців тому +1

    Great Tutorial , you explained the CSS overlapping very easy , Thank you

  • @jjmtz123
    @jjmtz123 Рік тому +1

    Another great video for Bricks Builder users! Looking forward to more tutorials.

  • @MarcoPardun
    @MarcoPardun Рік тому

    great video! Please make a video showing how breakdancing works

    • @DesignwithCracka
      @DesignwithCracka  Рік тому

      I have videos on Breakdance on the channel.. unless there's a specific thing you wish to know.

    • @MarcoPardun
      @MarcoPardun Рік тому

      @@DesignwithCracka I would like something like this video to overlap content. I watch all of your videos :)

    • @randyluna551
      @randyluna551 Рік тому

      Yes, please let us know if this is also possible with breakdance...thanks :)@@DesignwithCracka

  • @ham2956
    @ham2956 Рік тому

    Nice thumbnail 👌

  • @kakenetit2
    @kakenetit2 Рік тому

    I learn something new every time! Thanks!

  • @victor.design
    @victor.design Рік тому

    Thanks, I really learn from your channel how to handle Bricks. There are many details and I appreciate you taking the time for all this.

  • @buntusdev-uf1kt
    @buntusdev-uf1kt Рік тому

    Really good tutorial. Overlapping multiple content in grid can be complex. You made it extremely easy. 👌

  • @ravakano
    @ravakano Рік тому

    You're killing it mate, good one.

  • @ronaldkasoma
    @ronaldkasoma Рік тому +1

    Can you do a complex CSS grid layout but for a query loop of posts

  • @chrisparky
    @chrisparky Рік тому

    Many thanks great simple tutorial

  • @malikqatagan8977
    @malikqatagan8977 Рік тому

    Good visual understanding about css grid. Nice tutorial, thanks a lot 👍

  • @barbaranewerla
    @barbaranewerla 9 місяців тому

    I love the grid version of these overlaps because in some ways it is much easier than the flex-ones. But I have a problem with responsiveness. When I switch to 1fr layout I end up with my following cards been pulled partly under the precedent ones - the gap does not work anymore. In addition they overflow the section downwards. I don't know what is happening here. Followed your instructions.

  • @clarebrody1
    @clarebrody1 Рік тому

    Awesome tutorial! Subscribed 👍

  •  Рік тому

    Great tutorial, congrats

  • @aaqilayden373
    @aaqilayden373 Рік тому

    Nice tutorial. Thanks.

  • @johnramos7761
    @johnramos7761 Рік тому

    I watched a few of Kevin Geary's videos; they are great but slow and a little repetitive. I guess they are intended for a distinct audience than yours, but even without experience, as I'm entering this world of CSS, PHP, and JS, I prefer your style, and I can say your videos rock! I get everything on the first viewing of the video, which I tested, on this, and on the others I already saw from you. I like your style of teaching; you go straight to the point. Keep up the hard work!
    Cheers from Portugal!

  • @chantscreen
    @chantscreen Рік тому

    Brilliant!

  • @philipplunch8526
    @philipplunch8526 Рік тому

    I did this for my first Bricks client last year, really like it. Lots of possibilities when using alternating Layouts in a query. Thanks for the Video 😊
    What I don’t get yet is the flex nowrap: how does it relate to the css Grid?

    • @DesignwithCracka
      @DesignwithCracka  Рік тому +1

      The nowrap is for the content of the grid items which are displaying as flex. The grid parent is displaying as grid, but the grid children (items) are displaying as flex.

    • @philipplunch8526
      @philipplunch8526 Рік тому

      @@DesignwithCracka Thanks for the quick reply! I will look into it, still dont get it 100% as im new to it :)

  • @DaleDonnolly
    @DaleDonnolly Рік тому +1

    Great Tutorial Once again; - Thanks!
    I cannot seem to figure out why your Grid Rows are narrower than your columns. Mine are completely square and causes my image to stretch vertically in the builder; - requiring me to scroll up and down to see the entire build. How do I get my rows to be more narrow like you have them?

    • @DesignwithCracka
      @DesignwithCracka  Рік тому +1

      Not sure what your issue is, but you can get more feedback from my Facebook group.

  • @eljaybos
    @eljaybos Рік тому

    Hi Cracka, wonderful video, and nicely explained. However, is it possible to do alternating columns using a loop to be put on the front page? Hope to hear from you.

    • @DesignwithCracka
      @DesignwithCracka  Рік тому

      It’s basically the same technique. In this case the grid container will be the loop item.

    • @eljaybos
      @eljaybos Рік тому

      @@DesignwithCracka I did just that, but the columns don't alternate

    • @DesignwithCracka
      @DesignwithCracka  Рік тому

      @@eljaybos if you’re in the Facebook group, post a screenshot there and I’ll assist

  • @jmcbade2960
    @jmcbade2960 Рік тому

    I see you reference ACSS in your notes. How would you apply the alternate layout if we have ACSS? Also, would we still need the CSS to handle the breakpoint?

  • @ThierryC-te3rx
    @ThierryC-te3rx Рік тому

    @8:33 Wait... what was that ? 👀

  • @paolobattiloro947
    @paolobattiloro947 Рік тому

    hi, how i can display grid structure ?

    • @DesignwithCracka
      @DesignwithCracka  Рік тому

      This is one way: ua-cam.com/video/ur_JIiw5L64/v-deo.html

  • @michaelmclaughlin1563
    @michaelmclaughlin1563 Рік тому

    Thanks for a great tutorial video