Ive been trying to fix this for 3 days now, been through countless forums,videos,plugins, if someone could please give me a hand to fix this in custom css it would change my life I'm trying to get all the grey boxes to be the same size height, they're determined atm by the amount of content/writing i have in them,,,, I've tries adding '<p>' to this is the custom word press editor but it doesn't recognise code,,, I've also tried multiple 'custom css' code and even messing about with the style sheet. Please if anyone could shed some light that would be great ash link below: https://transcriptsaustralia.com.au
Sadly, I'm no wordpress dev so I don't know where to apply a CSS trick I've just learnt. As follows: First, take out the background and border of .services-builder.style1 Then make the background for #section-home-inner to be background-image: repeating-linear-gradient(90deg, red 0%, red 32%, white 32%, white 34%); Code (CSS): That should make all 3 columns red Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/repeating-linear-gradient
Hi Ash, The easiest way to do this is to set a min-height for the boxes. Set the value to the tallest box. .services-builder.style1 {min-height: 319px;} Code (CSS): Let me know if you need any more help. I am a Tucson web designer for Kodeak Digital Media Experts. https://kodeakteam.com/tucson-and-phoenix-seo-company/tucson-web-design/
@Rokis has it right that flex-box is probably your best bet -- though really this REEKS of the type of artsy-fartsy layout concept that really has zero damned business on a website in the first place. I would be pitching that entire layout concept in the trash and starting over with something simpler like a flat list view... or axing the background colours entirely. Otherwise you're looking at both a code-bloat mess AND an accessibility nightmare. Though with the fixed metric fonts, conflicting size declarations, 62.5% [b[LIE[/b] (that's overridden by an even worse 13px), static style in the markup, static scripting in the markup, endless pointless separate scripts and stylesheets, lack of media targets, endless pointless DIV for nothing, endless pointless classes for nothing, complete lack of anything remotely resembling proper semantics -- if you brought that to me as a client I'd tell you to pitch the entire train-wreck of developer ineptitude in the trash and to start over from scratch! As evidenced by the 19.4k of HTML to deliver 2.19k of plaintext and zero CONTENT images. (aka the images present should be in the CSS, not the markup!) -- basically anywhere from three to FIVE times the HTML needed! Of course, developer ineptitude and ignorance to the point of whoever made the site not even being qualified to make a website is pretty much par for the course the moment turdpress, much less the mind-numbingly idiotic halfwit bullshit that is bootcrap gets involved in pissing all over the place. Hence why there is NO legitimate reason for this: <body data-rsssl=1 class="home page-template-default page page-id-79 wp-custom-logo layout-fixed pre-header-style2 header-style1 header-logooverflow header-sticky"> <div id="body-core" class="hfeed site"> <header> <div id="site-header"> <div id="pre-header"> <div class="wrap-safari"> <div id="pre-header-core" class="main-navigation"> </div> </div> </div> <!-- #pre-header --> <div id="header"> <div id="header-core"> <div id="logo"> <a href="https://transcriptsaustralia.com.au/" class="custom-logo-link" rel="home" itemprop="url"><img width="314" height="165" src="https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1.png" class="custom-logo" alt="TranscriptsAustralia" itemprop="logo" srcset="https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1.png 314w, https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1-300x158.png 300w" sizes="(max-width: 314px) 100vw, 314px" /></a> </div> <div id="header-links" class="main-navigation"> <div id="header-links-inner" class="header-links"> <ul class="menu"> <li class="current_page_item"><a href="https://transcriptsaustralia.com.au/">Home</a></li><li id="menu-item-2" class=""><a href="https://transcriptsaustralia.com.au/starthere/"><span>Start Here</span></a></li> </ul> </div> </div> <!-- #header-links .main-navigation --> <div id="header-nav"><a class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a></div> </div> </div> <!-- #header --> <div id="header-responsive"><div id="header-responsive-inner" class="responsive-links nav-collapse collapse"><ul><li class="page_item page-item-79 current_page_item"><a href="https://transcriptsaustralia.com.au/">Home</a></li> <li class="page_item page-item-2"><a href="https://transcriptsaustralia.com.au/starthere/">Start Here</a></li> </ul></div></div> <div id="header-sticky"> <div id="header-sticky-core"> <div id="logo-sticky"> <a href="https://transcriptsaustralia.com.au/" class="custom-logo-link" rel="home" itemprop="url"><img width="314" height="165" src="https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1.png" class="custom-logo" alt="TranscriptsAustralia" itemprop="logo" srcset="https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1.png 314w, https://transcriptsaustralia.com.au/wp-content/uploads/2017/06/cropped-Screen-Shot-2017-06-28-at-4.21.13-pm-1-300x158.png 300w" sizes="(max-width: 314px) 100vw, 314px" /></a> </div> <div id="header-sticky-links" class="main-navigation"> <div id="header-sticky-links-inner" class="header-links"> <ul class="menu"> <li class="current_page_item"><a href="https://transcriptsaustralia.com.au/">Home</a></li><li id="menu-item-2" class=""><a href="https://transcriptsaustralia.com.au/starthere/"><span>Start Here</span></a></li> </ul> </div> </div><div class="clearboth"></div> <!-- #header-sticky-links .main-navigation --> </div> </div> <!-- #header-sticky --> </div> </header> Code (markup): To be significantly more than: <body> <div id="top"> <h1><a href="/">Transcripts Austrailia</a></h1> <input type="checkbox" id="showHideMainMenu"> <label for="showHideMainMenu"></label> <ul id="mainMenu"> <li><a href="/" class="current">Home</a></li> <li><a href="/starthere">Start Here</a></li> </ul> <!-- #top --></div> Code (markup): ... apart from utter and complete ineptitude and ignorance on the part of whoever is slopping together that disaster any-old-way with zero regards for using HTML or CSS properly, much less meeting accessibility minimums! Drag it 'round back o' the woodshed with a .30-06, nuzzle the barrel to it's ear, and give it the Old Yeller treatment. There is NOTHING worth even trying to salvage from that mess. Doubly true once you realize there's a <font> tag in there, what is this 1997?
I pretty much agree with @deathshadow re flexbox and the artsy-fartsy crowd. For something as simple as the OP's original question, I'd go with the display property. <!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta content="width=device-width, height=device-height, initial-scale=1" name="viewport"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0; padding: 1em; } p { font-size: 1em; } #rowblock { display: table-row; width: 100%; } #rowblock > * { border: 1px solid black; display: table-cell; padding: 0 1em; width: 33%; } /*]]>*/ </style> </head> <body> <div id="rowblock"> <div> <p>This group has multiple paragraphs.</p> <p>Another paragraph so as not to make the previous paragraph a liar.</p> </div> <ul> <li>a list item</li> <li>and another</li> </ul> <p>A random paragraph</p> </div> </body> </html> Code (markup): gary NB: I still think a code block that doesn't maintain formatting is sucky. ~g
Then he can go back and edit it to suit his needs for expansion. The OP could not figure out how to get the boxes to be the same height, how is my information provided not a good start? Also, who is going to use font large enough to effect 420 lmmfao...
@ash_ash_ash I see that your solution was this: .mycolumns { height: 357px !important; } Code (CSS): But if you still considering auto-height base on the content, you may replace fixed height with this: #post-79 > .csRow { display: -webkit-flex; display: flex; } .mycolumns { display: inherit; -webkit-flex: 1; flex: 1; } Code (CSS): I hope this help. Thanks and God bless always!
He might add enough words to need more height, or if 420px is a large enough height to allow for enlarged fonts or increased amount of copy, why are you wasting all that space for nothing. A robust solution will automagically adjust itself to accommodate variations. Setting the height of an element is so seldom an intelligent fix, the height property could be be removed from flow elements with little harm done. g
Your ignorance of the most basic of dynamic / elastic scaling and layout appears only to be matched by the incoherency and irrelevancy of your "me too four word" wonder-posts.
OP obviously can not figure out how to get a box to be the same height, do you honestly think they can figure out any other code that you post for them? However, he can easily figure out that 420 is controlling the height. If they use a percent and add more content to one box over the other than it is not ALWAYS the same size. By doing it this way, even though I did not say I recommend it, it would guarantee that the boxes remain WHATEVER size the OP chooses to create them as