Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Make all box heights the same

Discussion in 'HTML & Website Design' started by ash_ash_ash, Jul 5, 2017.

0
  1. #1
    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 :p

    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 :D
    SEMrush
    ash

    link below:

    https://transcriptsaustralia.com.au
     
    ash_ash_ash, Jul 5, 2017 IP
    SEMrush
  2. hdewantara

    hdewantara Well-Known Member

    Messages:
    452
    Likes Received:
    37
    Best Answers:
    20
    Trophy Points:
    130
    #2
    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
     
    hdewantara, Jul 5, 2017 IP
  3. Rokis

    Rokis Member

    Messages:
    60
    Likes Received:
    14
    Best Answers:
    0
    Trophy Points:
    45
    #3
    Have a look at flexboxes, I believe they are what you are looking for.
     
    Rokis, Jul 6, 2017 IP
  4. Jared Goss

    Jared Goss Greenhorn

    Messages:
    17
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    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/
     
    Last edited: Jul 7, 2017
    Jared Goss, Jul 7, 2017 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,041
    Likes Received:
    1,670
    Best Answers:
    236
    Trophy Points:
    515
    #5
    @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?
     
    deathshadow, Jul 8, 2017 IP
  6. kk5st

    kk5st Prominent Member

    Messages:
    3,481
    Likes Received:
    366
    Best Answers:
    28
    Trophy Points:
    335
    #6
    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
     
    kk5st, Jul 8, 2017 IP
  7. locals

    locals Well-Known Member

    Messages:
    1,676
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    153
    #7
    height= 420px
     
    locals, Jul 24, 2017 IP
  8. kk5st

    kk5st Prominent Member

    Messages:
    3,481
    Likes Received:
    366
    Best Answers:
    28
    Trophy Points:
    335
    #8
    A really crappy suggestion. If the font size is changed? If the content is changed?
     
    kk5st, Jul 24, 2017 IP
  9. locals

    locals Well-Known Member

    Messages:
    1,676
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    153
    #9
    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...
     
    Last edited by a moderator: Jul 24, 2017
    locals, Jul 24, 2017 IP
  10. Blank ™

    Blank ™ Well-Known Member

    Messages:
    223
    Likes Received:
    18
    Best Answers:
    6
    Trophy Points:
    110
    #10
    @locals, fixed height - why on earth would you do that?
     
    Blank ™, Jul 24, 2017 IP
  11. locals

    locals Well-Known Member

    Messages:
    1,676
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    153
    #11
    read the op question
     
    locals, Jul 24, 2017 IP
  12. Blank ™

    Blank ™ Well-Known Member

    Messages:
    223
    Likes Received:
    18
    Best Answers:
    6
    Trophy Points:
    110
    #12
    He wanted to make all the boxes the same height, not fixed height.
     
    Blank ™, Jul 24, 2017 IP
  13. alfieindesigns

    alfieindesigns Well-Known Member

    Messages:
    127
    Likes Received:
    5
    Best Answers:
    2
    Trophy Points:
    130
    #13
    @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!
     
    Last edited by a moderator: Jul 24, 2017
    alfieindesigns, Jul 24, 2017 IP
  14. kk5st

    kk5st Prominent Member

    Messages:
    3,481
    Likes Received:
    366
    Best Answers:
    28
    Trophy Points:
    335
    #14
    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
     
    kk5st, Jul 24, 2017 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,041
    Likes Received:
    1,670
    Best Answers:
    236
    Trophy Points:
    515
    #15
    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.
     
    deathshadow, Jul 25, 2017 IP
    sarahk likes this.
  16. locals

    locals Well-Known Member

    Messages:
    1,676
    Likes Received:
    19
    Best Answers:
    0
    Trophy Points:
    153
    #16
    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
     
    Last edited by a moderator: Aug 9, 2017
    locals, Jul 25, 2017 IP