Hey Josh, just another quick message to say that I'm a total beginner with no knowledge of code, so easy tutorials like this help me to improve my Divi layouts immensely and to add new custom sections to my library that look great and can be called upon at any time! I wish you had more tutorials like this where you teach beginners how to create cool looking custom modules and sections! If you or anyone else knows where to find more videos like this one, please let me know! I'm more of a video learner than an article learner myself :)
Such a helpful tutorial! When I try to adjust the padding per the tutorial, I don't have any options for the different columns - it's all under the one row. Anyone have any ideas?
Hi Josh, Awesome Vid!! Thanx. Most frustrating elusive part for me is where you're doing the Shift / Alt to make the whole section slimmer. I'm just not able to gracefully close the walls in on the content like yours does. I'm using a Mac laptop, are there other keys then the Shift and the ALT/OPTION that I should be using?
This works great, but once the information exceeds the height of the image, the background color start to extend above/below the image, which no longer makes it take up the full height of the column.
You can fix this by using object-fit function. For example Parent: display: block; width:100%; height:300px _______________________ And the image: position: absolute; height: 100%; width: 100%; top: 0; left: 0; right: 0; bottom: 0; object-fit: cover;
What if I have a two-column section with two images and I'm trying to set two DIFFERENT background colors behind the images to take up the full container (fullwidth both vertical and horizontal)?
Does CSS for adjusting the passing of the second column work if you're also using CSS to adjust column stacking order on mobile? Would it recognize the correct column to apply the padding to?
Hi Josh ! I want to ask you about searching boxes , i'm creating a job board website and i m not using a specific theme , could you tell me how or where i can get a serch box with location and categories ! thank you soooo much !!
Great tutorial, thank you for that. I have only one annoying thing that is happening after I include the code in the style sheet. All cards, blurbs, etc., which columns were equalized turn to have different sizes/heights because of this code being in the style sheet, which impacts the entire website. I tried including the code just to the page settings but obviously, it affects cards the same way. Then I decided to insert the code just to the module Custom CSS under advanced settings but Divi shows the code has errors (like unexpected item "}" and similar stuff. Any idea of how to overcome these frustrating changes?
Hey Josh, Great tutorial ~ thanks! Any css tips out there for basically flipping the order of the columns of the second row for mobile. ...So it would view image, text, image, text (instead of image, text, text, image) ~~~ :)Kt
@Katie I found a way. It's called Stacking order. And it works just the way that we could hope for. There is a small code snippet and a tut. Good luck. ua-cam.com/video/77JE-SY1_Aw/v-deo.html
Hi Josh, Love your tutorials they've helped me solve many problems. Curious to know if this technique will work if the columns are 1/3 & 2/3 rather than of equal size? Look forward to your response.
Thanks for the tuto Josh! Is it possible to do the same thing with slides instead of pix? I'm still having a big white margin that I can't get rid of... This is driving me crazy
Thanks, Stephane! I would think it's possible though the slider module is a bit more tricky. You'd probably have to get in and play with the margin and padding. And make sure all images are saved at the same size.
Thanks for this. I went to Appearance /Theme Editor and added the code but keep getting error: Something went wrong. Your change may not have been saved. Please try again. There is also a chance that you may need to manually fix and upload the file over FTP.
Hi Josh, I've tried doing this several times, and even recreating the row from scratch but the text still isn't centering. Any ideas? Would really love your help!
This layout and code is all still relevant with the new updates to Divi so usually I recommend clearing the cache and refreshing browser to show the CSS!
Hey Beryl, yeah the image will be cropped depending on how big the other section is. I usually just adjust the image to be able to work if part of it is cropped.
I will certainly keep that in mind. I plan on releasing a couple courses/training this year so I'll probably do it there. Though maybe I can do a simplified version as a free tutorial....
Great tutorial, thanks a bunch! One remark though: at 9:10 you mention that you can also post the code into the custom section in the visual builder, instead of in the styles.css in your child theme. However, when I try to paste the code into the custom section, it gives me an error. /*---------------Vertically Center Column Elements---------------*/ .et_pb_equal_columns >.et_pb_column { [EXPECTED RBRRACE.] margin-top:auto; margin-bottom:auto; } [UNEXPECTED TOKEN '}'.]
Hi Josh, first thank´s for your tutorial. I´m just wondering were is in the row settings > design > this "sizing" isn´t work form me. Would be nice to show you ans screenshot but I can.
Hey Josh, just another quick message to say that I'm a total beginner with no knowledge of code, so easy tutorials like this help me to improve my Divi layouts immensely and to add new custom sections to my library that look great and can be called upon at any time! I wish you had more tutorials like this where you teach beginners how to create cool looking custom modules and sections! If you or anyone else knows where to find more videos like this one, please let me know! I'm more of a video learner than an article learner myself :)
This was super helpful, as was your video about the full-width button not being there anymore - thanks for your help!
Hi Josh! Thank you for sharing. How would you convert this layout into a slide?
The option to 'make this row fullwidth' is not longer available.
Thank You. This two column section was making me crazy.
Such a helpful tutorial! When I try to adjust the padding per the tutorial, I don't have any options for the different columns - it's all under the one row. Anyone have any ideas?
Thanks for this. So simple. Great video.
Anyone else come across the problem that “make full width” option as seen at 2:37 is not an option on divi anymore?
Here's the fix:
ua-cam.com/video/_DaG6ihYAc8/v-deo.html
And ua-cam.com/video/a_kTl3HoeMU/v-deo.html
Good stuff. Thanks for taking the time to put this together.
Thanks, Charles!
Hi Josh, Awesome Vid!! Thanx. Most frustrating elusive part for me is where you're doing the Shift / Alt to make the whole section slimmer. I'm just not able to gracefully close the walls in on the content like yours does. I'm using a Mac laptop, are there other keys then the Shift and the ALT/OPTION that I should be using?
thanks, used this to fix today on a problem I was having with the first Divi built site for a client.
Awesome to hear it helped you out, Kevin! Cheers
Works thank you! Really hoping future Divi updates allow you to do this without CSS, here's hoping:)
Great video! Please which software did you use in making this video?
We love you Josh! Thank you!
ha too kind, too kind. Thank you!
This works great, but once the information exceeds the height of the image, the background color start to extend above/below the image, which no longer makes it take up the full height of the column.
You can fix this by using object-fit function. For example
Parent:
display: block;
width:100%;
height:300px
_______________________
And the image:
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
object-fit: cover;
What if I have a two-column section with two images and I'm trying to set two DIFFERENT background colors behind the images to take up the full container (fullwidth both vertical and horizontal)?
This has been so useful, thank you. Is it possible to turn this into a slider?
Does CSS for adjusting the passing of the second column work if you're also using CSS to adjust column stacking order on mobile? Would it recognize the correct column to apply the padding to?
very good video
I do not see any option, that allows me to make my whole row fullwidth?
How to do this now?
sam here
I believe you have to set it manually in the "width" field, to 100%
@@RuneGlad I contacted Divi support, they were willing to help! Thanks anyway!
@@JerelLorenzo set max fullwidth to 100%
Hi Josh !
I want to ask you about searching boxes , i'm creating a job board website and i m not using a specific theme , could you tell me how or where i can get a serch box with location and categories ! thank you soooo much !!
This is so useful. Great video
Maybe this option not any more on new Divi theme. I have tried but I can't make the row full width. Do you have any new tutorial about it ? Thanks
Here ya go: joshhall.co/where-did-the-make-this-row-fullwidth-button-in-divi-go/
@@JoshHallco Thank you I got it already. :)
Great tutorial Josh 👏🏻
Thanks, Amanda!
Great tutorial, thank you for that. I have only one annoying thing that is happening after I include the code in the style sheet. All cards, blurbs, etc., which columns were equalized turn to have different sizes/heights because of this code being in the style sheet, which impacts the entire website. I tried including the code just to the page settings but obviously, it affects cards the same way. Then I decided to insert the code just to the module Custom CSS under advanced settings but Divi shows the code has errors (like unexpected item "}" and similar stuff. Any idea of how to overcome these frustrating changes?
Such a great work! forever grateful
Hey Josh, Great tutorial ~ thanks! Any css tips out there for basically flipping the order of the columns of the second row for mobile. ...So it would view image, text, image, text (instead of image, text, text, image) ~~~ :)Kt
I have the same issue 🙂 I hope there is a way to fix it!
@Katie I found a way. It's called Stacking order. And it works just the way that we could hope for. There is a small code snippet and a tut. Good luck.
ua-cam.com/video/77JE-SY1_Aw/v-deo.html
+1 on that method!
Awesome Per! Thanks for the taking the time to comment and for the link, much appreciated!:)~~
Great, Thanks Josh!~
Hi Josh, Love your tutorials they've helped me solve many problems. Curious to know if this technique will work if the columns are 1/3 & 2/3 rather than of equal size? Look forward to your response.
Can we turn this into a slider?
No longer option for making sections full width. Help!
Go to sizing of the row and change width to 100%
@@derekjones3596 Thanks Derek, I had figured it out but appreciate you taking the time to answer.
Thanks for the tuto Josh!
Is it possible to do the same thing with slides instead of pix? I'm still having a big white margin that I can't get rid of... This is driving me crazy
Thanks, Stephane! I would think it's possible though the slider module is a bit more tricky. You'd probably have to get in and play with the margin and padding. And make sure all images are saved at the same size.
Thanks for the info. I like the centering css.
No problem. Yeah that's one of my favorite little tricks for Divi :)
This is wonderful!!! Thank you very much!
This is perfect! Thank you so much!
Thank you. You are a legend.
Thanks for this. I went to Appearance /Theme Editor and added the code but keep getting error: Something went wrong. Your change may not have been saved. Please try again. There is also a chance that you may need to manually fix and upload the file over FTP.
Perfect Josh, Thank you so much.
No problem, Simon!
Brilliant! So helpful, thank you!
Can this be accomplished with the Map module?
Perfect Josh :)
Hi Josh,
For some reason the columns will not stack on my page but rather stay side by side with the image being extra tiny. How do I fix that? :)
Thank so much! Just what I needed
Hi Josh, I've tried doing this several times, and even recreating the row from scratch but the text still isn't centering. Any ideas? Would really love your help!
This layout and code is all still relevant with the new updates to Divi so usually I recommend clearing the cache and refreshing browser to show the CSS!
@@JoshHallco thanks! I'll try that.
@@87schatje if that doesn't work, zip a note in here: joshhall.co/contact
Hi Josh - how can I do this within a slider?
how do I add a glitter box with a break in around the image?
Not sure exactly what you're going for but it sounds like either a border effect or background image!
I followed the directions but my image in the left column is cropped. I lose the full image with gutter 1 full width
Hey Beryl, yeah the image will be cropped depending on how big the other section is. I usually just adjust the image to be able to work if part of it is cropped.
Thanks, just what I needed
make this row full with is no longer available?
found your other tutorial on the missing full width setting. width 100% and max width 100%
joshhall.co/where-did-the-make-this-row-fullwidth-button-in-divi-go/
I dont have the "make fulll width" option in my divi for some reason, any ideas?
Here ya go: ua-cam.com/video/_DaG6ihYAc8/v-deo.html
@@JoshHallco thanks are lot
Please make full website tutorial
I will certainly keep that in mind. I plan on releasing a couple courses/training this year so I'll probably do it there. Though maybe I can do a simplified version as a free tutorial....
I like the idea of that, yes please :)
Perfect video. Thank you! (:
Thanks a lot!
Great tutorial, thanks a bunch! One remark though: at 9:10 you mention that you can also post the code into the custom section in the visual builder, instead of in the styles.css in your child theme. However, when I try to paste the code into the custom section, it gives me an error.
/*---------------Vertically Center Column Elements---------------*/
.et_pb_equal_columns >.et_pb_column { [EXPECTED RBRRACE.]
margin-top:auto;
margin-bottom:auto;
} [UNEXPECTED TOKEN '}'.]
same.....
Isn´t work this in the new version!
Be sure to add the CSS in the post and refresh/clear cache as it works with all recent versions of Divi. It's what I use on all my sites :)
Hi Josh, first thank´s for your tutorial. I´m just wondering were is in the row settings > design > this "sizing" isn´t work form me. Would be nice to show you ans screenshot but I can.
Great !
Thank you Francis!
Prince!
DO A BOX WITH A TOP AND BOTTOM AND NO GAPS!!!!!!!!
abe ye kya builder he kya yaar !!!
didnt even write a single line of code... smh
well this was really rubbish
Yes! I've been waiting for these type of hater comments to come in. That's when you know you're on to something :)
@@JoshHallco no it's really not, you not even coding mate