![]() ![]() Thanks for the great tutorial! Your helpful direction encouraged me to create a handy tool that auto calculates the CSS column “width” properties based on Divi’s gutter choices and desired number of columns (2 – 6). Thanks again for the tutorials and your availability to fill in the cracks via these questions/answers. But until one knows these tidbits, frustration and much wasted time. Now, once one knows these things, probably will never make the mistake again, and will plow ahead productively. (That’s me raising his hand on this one many hours spent wondering.) But, save the changes and exit the divi editor (or bring up your page in a separate TAB in your browser outside the divid editor) and Voila! Now it is breaking as expected! One can waste uncounted hours making changes and wondering why you don’t see them taking affect in the divi editor. So, you make changes after changes and you don’t see them taking affect. When in the DIVI editor with your page set to Phone mode, these changes are not displayed the break-points. ![]() Bingo! That was the answer to my problem. Setting “width: auto!important ” for Phone, solved the overlapping setting applied from the Desktop setting of “width: 15%!important ” on one of the columns for example.The answer is that you don’t edit that, you merely enter your own new setting by typing or pasting into the text box. Not obvious that grayed out text in Tablet/Phone settings for Custom CSS is what is being defaulted due to the Desktop setting.So, in the interest of sharing (and thanks for all you have shared to get us all started), I will list those things for other newbies. I have discovered a few things now that are also not intuitive that I think others in previous posts have stumbled over. Of course, being a hidden feature unless you mouse-over is not intuitive for a newbie, but I get it now. I now know, being new to divi/WP, how to set different settings for desktop/tablet/phone. So, please, what am I missing here? Reply I do have the latest/greatest DIVI code as far as I can tell. I don’t seem to have an option for ‘desktop, tablet, or phone’ when adding the CSS code. It seems that Josh had this same question 4 months ago, and I don’t understand your answer or what the solution was. In other words, if I just leave those at their default setting, everything works exactly the same, the row is just a different total width. I have played around with your settings and it seems that ‘row width’, ‘max row width’, nor ‘gutter’ settings make any difference. This is somewhat OK for the Text Modules, but the button modules overlap each other. Instead, each column stays on the same horizontal plane and grows in height. When on mobile, or on desktop and you reduce the width of the display, the columns no longer stack underneath each other as they do with the default 4-Col test row. We have lost something with the special row w/ CSS. I placed Text, Text, Button, Button in the 4 columns of each row. As an example, I added another row with the default 4 equal columns. Changed my individual columns to 15%, 50%, 15% and 20%. This tutorial is what I needed to solve a current WP/divi site design. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |