Search the Community
Showing results for tags 'css table'.
Found 2 results
-
Hi everybody! I hope somebody could help me understand a complex dynamic page structure and to debug my problem, which is as follows: change order of two divs in mobile view When in mobile phone view (screen width < 768 px., showing the content of the page in just one screen-wide column) I want to show two columns of a wordpress page in another order than the one they appear when in desktop view. The left column should appear, in mobile view, under the right column, instead of appearing over (before) the right column. For this, I found the following generic solution (1) : <div id="wrapper"> <div id="firstDiv"> Content to be below in this situation </div> <div id="secondDiv"> Content to be above in this situation </div> </div> @media only screen and (max-width: 767px) { #wrapper { display: table; width: 100%; } #firstDiv { display: table-footer-group; } #secondDiv { display: table-header-group; } } And I am trying to implement it in the page that you can see here: http://www.luxuryexoticproperties.com/test/beoliere-estate/ My problem is that the page, generated dynamically by wordpress, is quite complex in its structure, and contains not only two divs for those two columns, but several divs, "nested" in each other, for each of the two columns, And I simply do not know which css name I should use for my generic example I wrote here above. The generated HTML-code of the two columns in the page is as follows (2) : <div class="post_content"> <div class="vc_row wpb_row vc_row-fluid vc_custom_1481449109473"> <!- here starts the left column of the WP-page, in my opinion -> <div class="wpb_column vc_column_container vc_col-sm-5"> <div class="vc_column-inner vc_custom_1481449100657"> <div class="wpb_wrapper"><div class=""> <p>The building comprises three blocks of flats...(text content)</p> </div> <div class=" " style="margin-top:0px;padding-bottom:20px;"> </div> <div class=""> </div> <div> <!- ... further text etc. -> </div> </div> </div> </div> <!- here starts the right column of the WP-page -> <div class="wpb_column vc_column_container vc_col-sm-7"> <!- images and gmap, etc. - I don't copy their code here, it's too long -> </div> </div> For the html-code above (2), I tried to adapt the CSS code as follows, to produce the effect I wished: "first div" I presumed that the left column is defined by <div class="wpb_column vc_column_container vc_col-sm-5"> "second div" and that the right column is defined by <div class="wpb_column vc_column_container vc_col-sm-7"> "wrapper" and took the <div class="post_content"> as the container of the two columns, as the "wrapper" (table). So the generic CSS solution from above (1), would be transformed into: @media only screen and (max-width: 767px) { .post_content { display: table; width: 100%; } .wpb_column.vc_column_container.vc_col-sm-5 {display: table-footer-group; } .wpb_column.vc_column_container.vc_col-sm-7 { display: table-header-group; } } but using this CSS does not work (it produces not the wished effect, just brings the html-page to a wrong format). I hope my question is not too complicated... And thank you all in advance! Horia
-
Hi, I have the following codes: HTML <body> <div id="main_body"><img name="elvislogo" src="elvislogo.gif" width="229" height="32" border="0" alt="Make Me Elvis"><p>Enter your first name, last name, and email to be added to the <strong>Make Me Elvis</strong> mailing list.</p> <form method="post" action="addemail.php" id="main_form"><div class="table_row"><p><label for="firstname">First name:</label></p><p><input type="text" id="firstname" name="firstname"></p></div> <div class="table_row"><p><label for="lastname">Last name:</label></p><p><input type="text" id="lastname" name="lastname"></p></div> <div class="table_row"><p><label for="email">Email:</label></p><p><input type="text" id="email" name="email"></p></div> <div class="table_row"><p></p><p><input type="submit" name="Submit" value="Submit"></p><p></p></div> </div> </form> </body> CSS #main_form { display : table;border-spacing : 5px;border : thin dashed grey;background-color : pink; } div.table_row { display : table-row; } div.table_row p { display : table-cell; }div.table_row p:first-child { text-align : right; } div#main_body { width : 400px; margin : auto; padding : 10px; } input, textarea { margin : 5px; } I want to make the submit button centered, but I don't know how to go about this - I'd make a table row and then place the button, but I don't know how to style the centering. Successfully solved solution would be appreciated. BTW, this code is from a book.
