Your video was excellent. Thank you for taking the time to create such an look to phones. When it comes to the layouts. Seeing how 70%plus of traffic is now done thru phones. Being able to create something that stands out above another's page on the phone is a game changer. Thanks again. For creatine this CSS I will put it to good use.
Thanks a lot for your kind words Brian! I'm sure more layout options for mobile devices will be the top priority for the Divi team after the launch of Divi 5, but to be realistic, flexbox and grid will probably take at leat a year from now to implement in the visual builder.
Victor! Excellent Video explaining and Free code for use. You are a blessing! Solved my issue that Divi Support had to give up on after an hour of back and forth. Just upped my web designer game so much. Thank you!
This is great, I was looking for something like this from very long time, I'm not webdesigner but I needed something simple for my portfolio so thank you, by the way how do I change width of column on desktop, I mean when I select format of 3 columns then they have pre-fixed sizes. I can reduce the width of content and column but spacing remain same. Other columns does not adjust according to new space.
I'm glad to hear that! Sure, you can change the spacing between columns on desktop by editing the Row settings under Design » Sizing » Use Custom Gutter Width Here you have four pre-defined colum gaps. If you want more granular control., you can change the media queries in my CSS and apply it to deskop (min-width: 980 px).
@@shivam_pandya. You can set the row width and max-width to 100% and gutter width: 1. You an replace the fr values in the CSS grid code with percentage, for example: grid-template-columns: 20% 30% 50%; Just remove the gap value (or set it to 0) if you don't want to have spacing between the columns.
@@DiviMundo chrome browser and it is malwarebytes that is blocking the site for Trojan horse. Malwarebytes are usually very accurate… I loved the video by the way and am very eager to use the code…
![โรงเรียนห้ามรัก โดนจับได้ตาย...!! [เอิร์นไดเม่]](http://i.ytimg.com/vi/4u02Sbr556Q/mqdefault.jpg)
Victor, what would we do without you!? You are absolutely brilliant. Thank you, thank you, thank you!
Wow, that’s really nice to hear! ☺️
Your video was excellent. Thank you for taking the time to create such an look to phones. When it comes to the layouts. Seeing how 70%plus of traffic is now done thru phones. Being able to create something that stands out above another's page on the phone is a game changer. Thanks again. For creatine this CSS I will put it to good use.
Thanks a lot for your kind words Brian! I'm sure more layout options for mobile devices will be the top priority for the Divi team after the launch of Divi 5, but to be realistic, flexbox and grid will probably take at leat a year from now to implement in the visual builder.
Victor! Excellent Video explaining and Free code for use. You are a blessing! Solved my issue that Divi Support had to give up on after an hour of back and forth. Just upped my web designer game so much. Thank you!
Cool, I'm really glad to hear that! Maybe I should send this video to the Divi support. 😀
You are one helluva great resource for knowledge. Excellent. I really appreciate you spreading your knowledge.
Thanks James, I'm really glad to hear that! 😀
👉 Here's the blog post with all the snippets: divimundo.com/en/blog/create-custom-divi-column-structures-in-mobile-devices-with-css-grid/
This is great, I was looking for something like this from very long time, I'm not webdesigner but I needed something simple for my portfolio so thank you, by the way how do I change width of column on desktop, I mean when I select format of 3 columns then they have pre-fixed sizes. I can reduce the width of content and column but spacing remain same. Other columns does not adjust according to new space.
currently I have applied different margins, paddings and width size to adjust and fit everything.
I'm glad to hear that! Sure, you can change the spacing between columns on desktop by editing the Row settings under Design » Sizing » Use Custom Gutter Width
Here you have four pre-defined colum gaps. If you want more granular control., you can change the media queries in my CSS and apply it to deskop (min-width: 980 px).
@@DiviMundo i see thanks, also how do i create something like e columns out of 100% ratio of raw...20% - 30% - 50%
@@shivam_pandya. You can set the row width and max-width to 100% and gutter width: 1. You an replace the fr values in the CSS grid code with percentage, for example:
grid-template-columns: 20% 30% 50%;
Just remove the gap value (or set it to 0) if you don't want to have spacing between the columns.
@@DiviMundo understood and thank you very much ✌️
that's grate and worthful 😍
I’m glad you liked it! 😊
Your site has a trojan horse in the code.... cant access the page
@@Kimrein I’m visiting it right now and it works fine here. What browser do you use?
@@DiviMundo chrome browser and it is malwarebytes that is blocking the site for Trojan horse. Malwarebytes are usually very accurate… I loved the video by the way and am very eager to use the code…
@@DiviMundo I tried an online scanner now and that one did not report any malicious code. Will try some more…
@@DiviMundo I tried the code now for woo products and indeed it makes it two columns, however only products to the left and empty to the right…
@@DiviMundo I see now that it is not meant for products in woo. Sorry