Vertically Center Content in Divi - in Columns and Sections and for Any Divi Module

แชร์
ฝัง
  • เผยแพร่เมื่อ 29 พ.ย. 2024

ความคิดเห็น • 65

  • @TheAntipreneur
    @TheAntipreneur 2 ปีที่แล้ว +4

    Fantastic Tutorial - It's like you knew I had seen 4 awful videos already and just needed the answer fast. :)
    You got a sub from me, Cheers!

    • @divicoaching
      @divicoaching  2 ปีที่แล้ว

      Thank you! Glad you found it usedul.

  • @tommyvaughanhaus
    @tommyvaughanhaus 8 หลายเดือนก่อน +2

    Finally. Someone who makes this work, explains it quickly and makes it easy.

  • @mervynfutter
    @mervynfutter หลายเดือนก่อน +1

    Wow this is excellent and so clear to follow. Thank you very much for the video.

    • @divicoaching
      @divicoaching  หลายเดือนก่อน

      You are fast becoming number one fan! Thank you.

  • @maplesonmedia5568
    @maplesonmedia5568 2 ปีที่แล้ว +1

    Holy smokes. I had no idea that you could center a module vertically in a section simply by applying flex to the section. This is fantastic, thank you.

    • @divicoaching
      @divicoaching  2 ปีที่แล้ว

      You're welcome and I'm glad you found this useful.

  • @HighSpiritsGuy
    @HighSpiritsGuy ปีที่แล้ว +1

    Yet another very helpful tutorial 💯

  • @adamstockton67
    @adamstockton67 3 ปีที่แล้ว +1

    Very well explained. Thanks

  • @stianthomassen6693
    @stianthomassen6693 ปีที่แล้ว +1

    Perfect! Just what I needed!

    • @divicoaching
      @divicoaching  ปีที่แล้ว

      Excellent. Glad to be able to help.

  • @jeremiahharemza1235
    @jeremiahharemza1235 9 หลายเดือนก่อน +1

    Thanks for the help. I ended up using slightly different column CSS to handle an expanding form in one of my 2 columns.
    display: flex;
    justify-content: space-around;
    flex-direction: column;

  • @ivanso1978
    @ivanso1978 9 หลายเดือนก่อน +1

    I was trying to manually align this in the section for days, nothing would work! Thank you so much! 😊

  • @kingofthedong3908
    @kingofthedong3908 หลายเดือนก่อน +1

    thank you very much kind sir you just resolved my problem

    • @divicoaching
      @divicoaching  หลายเดือนก่อน

      It's a bit of an old chestnut this one but glad it is still useful!

  • @scotfree7702
    @scotfree7702 10 หลายเดือนก่อน +1

    Just discovered your channel and info has been a godsend at this moment in my design, when are you going to make more videos because I think your knowledge, simple code and explanation of concepts is great for a beginner to advanced

    • @divicoaching
      @divicoaching  10 หลายเดือนก่อน

      Thank you for your kind words. More.coming soon. I have to fit these in with my day job and these vids always take longer to make than I think!

  • @geraldpratt5252
    @geraldpratt5252 2 ปีที่แล้ว +1

    Excellent tutorial. Thank you

    • @divicoaching
      @divicoaching  2 ปีที่แล้ว

      Thank you Gerald! So glad you found it useful.

  • @petercarden2052
    @petercarden2052 2 ปีที่แล้ว +2

    Wow, great walkthrough. Thanks. Concise and accurate. I sometimes have gone to sleep with some of the tutorials I find. Not yours, keep up the good work.

    • @divicoaching
      @divicoaching  2 ปีที่แล้ว

      Thanks Peter. After a long break due to work pressures I'm actually editing another video at the moment. Out in a day or two.

  • @elevateyourcreativeness
    @elevateyourcreativeness 2 ปีที่แล้ว +1

    Thank you for this! Great tutorial and easy to follow! I just subscribed!

    • @divicoaching
      @divicoaching  2 ปีที่แล้ว +1

      Thank you. Glad you found this useful.

  • @MirkoMancini
    @MirkoMancini 3 ปีที่แล้ว +1

    Thanks indeed, I was just looking for that!

    • @divicoaching
      @divicoaching  3 ปีที่แล้ว

      Excellent. Glad it was helpful.

  • @tomfraser3086
    @tomfraser3086 3 ปีที่แล้ว +2

    Excellent tutorial...thank you, your explanations are so clear and concise

    • @divicoaching
      @divicoaching  3 ปีที่แล้ว

      Thank you Tom. I am glad that you found this useful

  • @photogyulai
    @photogyulai ปีที่แล้ว +1

    Thanks! Very helpful!

  • @euchoulis
    @euchoulis 3 ปีที่แล้ว +2

    Great tutorial!

    • @divicoaching
      @divicoaching  3 ปีที่แล้ว +1

      Thank you!

    • @euchoulis
      @euchoulis 3 ปีที่แล้ว

      @@divicoaching a tutorial about how to setup divi presets like colors fonts in a more productive way would be great

  • @gonzobocanegra
    @gonzobocanegra 3 ปีที่แล้ว +1

    Thank u very much !!!!!

  • @siobhanburke8911
    @siobhanburke8911 3 ปีที่แล้ว +1

    Really, really useful. Need this so often. Thanks

  • @andymackk99
    @andymackk99 3 ปีที่แล้ว +1

    Clearly explained - thanks for sharing

    • @divicoaching
      @divicoaching  3 ปีที่แล้ว +1

      Thanks Andy. You are flying in the best part of the world! Down in Wiltshire now but spent every school holiday of my childhood in Galloway, near Kirkcowen. Did some flying myself in Grumman Cheetah's but many years ago!

  • @terrizwierzynski3463
    @terrizwierzynski3463 3 ปีที่แล้ว +1

    Great tutorial, thanks!

    • @divicoaching
      @divicoaching  3 ปีที่แล้ว

      Thanks Terri. Glad you found this useful!

  • @neilduckmanton715
    @neilduckmanton715 2 ปีที่แล้ว +1

    Brilliant tutorial - nicely paced and clear explanations. Top marks!

    • @divicoaching
      @divicoaching  2 ปีที่แล้ว

      Thanks Neil. Glad you found it clear. Sometimes Divi can be a little confusing and not as intuitive as it could be.

  • @marekp7356
    @marekp7356 ปีที่แล้ว +1

    Easy to follow, straight to the point! Amazing! Liked and subscribed.
    I would have used a super like or tip, (or what it is called), but I don't see it.

    • @divicoaching
      @divicoaching  ปีที่แล้ว

      Thank you Marek. I am pleased you found this useful.

  • @vinaly
    @vinaly 3 ปีที่แล้ว +1

    Thank you, this is exactly what I was looking for and you made it simple and easy to understand for a newbie like me.

    • @divicoaching
      @divicoaching  3 ปีที่แล้ว

      Thanks Dany. I am really pleased you found this useful.

  • @JanisMcAdoo
    @JanisMcAdoo 2 ปีที่แล้ว +1

    Another great tutorial. I think I may just sit here and watch all your videos. You do such a great job at explaining things. I would actually love a video on walking through all the background image settings for a hero image (background image size options and position options.) Almost all of my websites are for coaches and that hero image is of a person which makes it so difficult as it moves responsively.

    • @divicoaching
      @divicoaching  2 ปีที่แล้ว +1

      For that application I would use 2 or even 3 images - one for each breakpoint. You can choose the responsive option when you insert the image and choose a different file for each size. Easier to get the result you want…

    • @JanisMcAdoo
      @JanisMcAdoo 2 ปีที่แล้ว

      @@divicoaching Thank you! I'll try that responsive option and see if that makes a difference for me.

  • @marcoscandido7434
    @marcoscandido7434 2 ปีที่แล้ว +1

    wow I wish I found you 3 years ago

  • @redakourdi2727
    @redakourdi2727 2 ปีที่แล้ว +1

    Hello ! Why don't you use the css properties to align your items ? on top of the flexbox , we can use space-around as a value for justify-content propertie and also add a gap between flexbox elements instead of using margins to align element ....

    • @divicoaching
      @divicoaching  2 ปีที่แล้ว

      Yes that is an option. I wanted to demonstrate that it is possible to use 'auto' and a fixed value to position items. I hope the tutorial encourages people to learn more about flex box.

  • @TM74437
    @TM74437 2 ปีที่แล้ว +1

    Hi Can you explain how to reduce the height of the section ? In my case, this is too big but when i try to reduce section padding, transition effect is somehow not reduced.

    • @divicoaching
      @divicoaching  2 ปีที่แล้ว

      Hi T M. Not quite sure what you mean by 'transition effect'? Please can you give me a bit more information.

  • @hughreilly2023
    @hughreilly2023 ปีที่แล้ว +1

    typing displayflex doesn't work. There is some other things that you typed in that you did not explain. Ok I figured it out. It’s display:flex; that worked for me anyway.

    • @divicoaching
      @divicoaching  ปีที่แล้ว

      Did you use the punctuation? You must have the colon and semi-colon for it to work.
      display : flex ;

  • @AppavumAadhirayum
    @AppavumAadhirayum 8 หลายเดือนก่อน

    From Elementor... This is absolute s***** :(

    • @divicoaching
      @divicoaching  8 หลายเดือนก่อน

      Yeah but there's a lot of Elementor that is too 😂

  • @widjailachan8135
    @widjailachan8135 2 ปีที่แล้ว +1

    Great tutorial, thanks!

    • @divicoaching
      @divicoaching  2 ปีที่แล้ว

      Thank you. I'm pleased you found it useful. 😊