But during the css method demo you already manually dragged the picture en text in the right order for mobile. Now the order is wrong for desktop though. I think the 2nd method you show is wrong.
at 7:00 Why would you change the second row to match the first row, image left, text right, when the whole purpose of this was to have the text left and the image right on non-mobile, and then have the image stack on top of the text on moble?
Image left, text right. On mobile image on top of text. Like I said watch at the 7:00 min mark both rows are identical in desktop and then in mobile, nothing is different. This was supposed to highlight how you could have the image stack on top of the text in mobile while in desktop the text is on the left and the image is on the right.
Ok, I think because the css override will only work on the actual "page" not in the visual editor. That being said, the final "ta-da" moment showing the stacking change should have been on the front end of the site, not through the visual editor.
Thank you very much for this tutorial. Ive been confused more than 5hours trying to fix this. Until I found your vid! Thumbs up keep up the great content
I want to use the CSS method, however, in the current version of Divi there is no CSS tab on the Row Settings. Instead there is an Advanced tab but the CSS ID & Classes does not have any input boxes for Columns. So how do we implement the CSS method on the current Divi version?
I had the same problem but I got it sorted with the help from their customer support. So first, you will need to open the "Row Setting" > On the 'Content' tab, click the setting button on the left of individual column > Go to the 'Advanced' in the individual column, add the class name > Repeat the step above for those columns you want to change > When it's done, go to the 'Advance' tab in "Row Setting" and set the class name (custom_row) for the row Notes. It seems not working at first when I review the change in Divi Builder. But when I use my mobile phone to see the page, it works.
**For People who face the 'class name' problem with css code solution** First you will need to open the "Row Setting" > On the 'Content' tab, click the setting button on the left of individual column > Go to the 'Advanced' tab in the individual column, add the class name (first-on-mobile, second-on-mobile...etc) > Repeat the step above for those columns you want to change > When it's done, go to the 'Advance' tab in "Row Setting" and set the class name (custom_row) for the row Notes. It seems not working at first when I review the change in Divi Builder. But when I use my mobile phone to see the page, it works.
Thank you! The CSS code solved the problem for me. I was able to order the display of columns in a row in mobile view. I'm using visual composer, now Page Backery.
This is 2021 and a simple feature like this hasn't been added to Divi. Like I have to manually write CSS to choose how many columns I want on certain devices and now I have to write codes to stack columns. I am coming from Elementor and Oxygen and Layout pack is one reason I got Divi. Now I am forced to ask for a refund.
hey! Thank you so much for your videos! Your help so much. But I have got one problem, i wanna create a recipes blog, with a list of recipes seen on the mobil site aswell. How can i figure it out to see 2 fotos next to each other?
Love it!! Do you have a video that explains why it's better to use the section and row Custom CSS as opposed to adjusting the margins and padding individually?
I don't know what these other people are complaining about - they obviously can't follow your very clear instructions. It works perfectly. THANK YOU! I used the CSS method, as my client will be unnecessarily confused at seeing two copies of each row. And it would mean editing twice if there were changes to the content.
Toni Olivier, the second option I also prefer. Although the first one does not have to cause double changes, when you save the modules as global templates.
When you disable an element for certain devices, you can still see the element which is greyed out.... this makes it difficult to work with your design with all these elements still taking up room. How do you work around this?
I know. This is very annoying. Not sure why switching to a different device couldn't simply show the elements in order for that device only. ET folks are coders. They COULD make that happen. Guess we just have to ask.
I have build one site for the desktop-device (disabled for mobile and tablet), a second one only for mobile (disabled for desktop and tablet) and third one only for tablet (disabled for desktop and mobile). At the end I have loaded all three sites on just one site.
But during the css method demo you already manually dragged the picture en text in the right order for mobile. Now the order is wrong for desktop though. I think the 2nd method you show is wrong.
Yeah, thought the same thing. It didnt get to show how the css was shifting the components.
Sort of defeats the purpose doesn't it. Why would you need code to display it the way it would even without the code LOL
Thank you for this helpful video. The principles behind it are also helping me out with other layout problems due to responsiveness.
I am using the CSS version...still works fine 2022 🙂
at 7:00 Why would you change the second row to match the first row, image left, text right, when the whole purpose of this was to have the text left and the image right on non-mobile, and then have the image stack on top of the text on moble?
Because it shows up differently on mobile
Image left, text right. On mobile image on top of text. Like I said watch at the 7:00 min mark both rows are identical in desktop and then in mobile, nothing is different. This was supposed to highlight how you could have the image stack on top of the text in mobile while in desktop the text is on the left and the image is on the right.
Apoint Tomake ...yea, I'm confused right along with you. Maybe there was a filming error or something...feels like they forgot a step?
Ok, I think because the css override will only work on the actual "page" not in the visual editor. That being said, the final "ta-da" moment showing the stacking change should have been on the front end of the site, not through the visual editor.
Thank you very much for this tutorial. Ive been confused more than 5hours trying to fix this. Until I found your vid!
Thumbs up keep up the great content
That's great Kristiyan! I'm glad this tutorial was able to help you. 😄
I want to use the CSS method, however, in the current version of Divi there is no CSS tab on the Row Settings. Instead there is an Advanced tab but the CSS ID & Classes does not have any input boxes for Columns. So how do we implement the CSS method on the current Divi version?
Hi George, I am facing the same difficulty which you have mentioned above, did you find any solution for this?
You need to go into each column individually in the Row Settings.
Tried that didn't work. I had to resort to first method, which is kind of messy for my header
I had the same problem but I got it sorted with the help from their customer support.
So first, you will need to open the "Row Setting"
> On the 'Content' tab, click the setting button on the left of individual column
> Go to the 'Advanced' in the individual column, add the class name
> Repeat the step above for those columns you want to change
> When it's done, go to the 'Advance' tab in "Row Setting" and set the class name (custom_row) for the row
Notes. It seems not working at first when I review the change in Divi Builder. But when I use my mobile phone to see the page, it works.
is there is a class like col_sm-push-6 because i make 50 pages like left right text images
That was so freaking helpful, love it! I was dipping way deeper into my head to figure this one out. Thanks!
The css is brilliant. Works perfect, nice work!
**For People who face the 'class name' problem with css code solution**
First you will need to open the "Row Setting"
> On the 'Content' tab, click the setting button on the left of individual column
> Go to the 'Advanced' tab in the individual column, add the class name (first-on-mobile, second-on-mobile...etc)
> Repeat the step above for those columns you want to change
> When it's done, go to the 'Advance' tab in "Row Setting" and set the class name (custom_row) for the row
Notes. It seems not working at first when I review the change in Divi Builder. But when I use my mobile phone to see the page, it works.
thanks 🙏🏼
Thank you! The CSS code solved the problem for me. I was able to order the display of columns in a row in mobile view. I'm using visual composer, now Page Backery.
This is 2021 and a simple feature like this hasn't been added to Divi.
Like I have to manually write CSS to choose how many columns I want on certain devices and now I have to write codes to stack columns.
I am coming from Elementor and Oxygen and Layout pack is one reason I got Divi.
Now I am forced to ask for a refund.
If an element is disabled on mobile, does the section get included in the DOM and set to invisible, or is it removed from the DOM completely?
it's just hidden that's why that method it's retarded. it loads hidden content unnecessarily
It also means you have to remember to edit the duplicated rows when you do updates to the content
The CSS method works perfectly! Yes, he made a simple mistake explaining it but if you follow step by step it works! Give him a break!!
Hello Divi! How can I re-order pages/posts by date published? Because in default it ordered alphabetically. Thanks.
How can I use this in the divi theme builder body section? Or do you have an updated video?
hey! Thank you so much for your videos! Your help so much. But I have got one problem, i wanna create a recipes blog, with a list of recipes seen on the mobil site aswell. How can i figure it out to see 2 fotos next to each other?
Love it!! Do you have a video that explains why it's better to use the section and row Custom CSS as opposed to adjusting the margins and padding individually?
I don't know what these other people are complaining about - they obviously can't follow your very clear instructions. It works perfectly. THANK YOU!
I used the CSS method, as my client will be unnecessarily confused at seeing two copies of each row. And it would mean editing twice if there were changes to the content.
Toni Olivier, the second option I also prefer. Although the first one does not have to cause double changes, when you save the modules as global templates.
Hi Mak. I'm trying this method but it seems doesn't work anymore. Do you know why? Thank you
Is there a way to not stack them but have the photo and text side by side on the phone?
Hi! But what happens when you already put a ID in a row? Can I use a Class and an ID in the same row? I just tried it but doesnt work
Thank you so much! The CSS works! Great job!
Great CSS code! Thanks a lot guys!
You're always welcome! 😄
is there any other solution?
Hello! You should've used two different images to make it easier.
When you disable an element for certain devices, you can still see the element which is greyed out.... this makes it difficult to work with your design with all these elements still taking up room. How do you work around this?
I know. This is very annoying. Not sure why switching to a different device couldn't simply show the elements in order for that device only. ET folks are coders. They COULD make that happen. Guess we just have to ask.
Just have this running in the background, piece of cake.
I have build one site for the desktop-device (disabled for mobile and tablet), a second one only for mobile (disabled for desktop and tablet) and third one only for tablet (disabled for desktop and mobile). At the end I have loaded all three sites on just one site.
How do I make it look on mobile like its on pc ?
In Avada, you can just easily drag and drop this.
Is this method still current?
Cool, cool, cool, cool! Thanks a lot!
thanks again friend
First method sucks for it makes your website twice as big do to the duplicate modules. Not a very good practice in my oppinion
not what I needed lol