Equal height columns in any screen size and widths for divs (cellphone)

Signaler · Oct 18, 2020

Hello
I have a test page. 1 container, 1 banner div and below are 2 divs side by side.
http://www.davidshelpsite.com

#container: 960px
#banner that holds the 2 images for the banner
#left_colunm: 65%
#right_colunm: 30%

When viewed in a cell phone how to have the 2nd div go below the 1st one and have both go across the screen with equal widths? Plus how to have equal height columns?

Below is not working for me. I have removed them from the source as I cannot get it to work. Example below is what I came across at W3 Schools.

How To - Equal Height
http://w3schools-fa.ir/howto/howto_css_equal_height.html

David

Signaler · Oct 18, 2020

I'm using Bootstrap's mobile-first framework for this example.

Equal Height/Width Cards:

1 col wide on mobile, 2 cols wide on tablet, 4 cols wide on desktop.

Copy & paste code below into a new, blank document. Test in real browsers and devices.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 4.5 Equal Height/Width Cards </title>
<!--latest Bootstrap on CDN-->
<link rel="stylesheet" href="
https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<body>
<div class="container bg-dark">
<p class="text-light">Navigation goes here...</p>

<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 bg-info pt-3">

<!--1st column-->
<div class="col mb-4">
<div class="card h-100"> <img src="https://dummyimage.com/125x125" class="card-img-top rounded-circle" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>

<!--2nd column-->
<div class="col mb-4">
<div class="card h-100"> <img src="https://dummyimage.com/125x125" class="card-img-top rounded-circle" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content.</p>
</div>
</div>
</div>

<!--3rd column-->
<div class="col mb-4">
<div class="card h-100"> <img src="https://dummyimage.com/125x125" class="card-img-top rounded-circle" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is less text.</p>
</div>
</div>
</div>

<!--4th column-->
<div class="col mb-4">
<div class="card h-100"> <img src="https://dummyimage.com/125x125" class="card-img-top rounded-circle" alt="placeholder image">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
<p class="text-light">Footer goes here...</p>
<!--/.container--></div>

<!--First jQuery then Popper then Bootstrap--> 
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</body>
</html>

Related links:

https://www.w3schools.com/bootstrap4/

https://getbootstrap.com/docs/4.5/getting-started/introduction/

https://getbootstrap.com/docs/4.5/examples/

Post back if you have any questions.

Nancy O'Shea— Product User, Community Expert & Moderator

Signaler · Oct 18, 2020

Thanks for answering. Is there a way without using bootstrap?

I want to be able to control the layout without using bootsnap.

Signaler · Oct 18, 2020

Yes, there are other ways to build responsively with CSS Flexbox or CSS Grids and multiple CSS media queries for various device sizes.

Personally & professionally, I'm not interested in tedious manual coding when I can achieve the same thing in 1/4th the time using a responsive front-end framework in Dreamweaver. I prefer to use my coding skills for more important things like the backend. But if time and money are not important to you and you're up to the challenge, go for it.

Happy coding!

🙂

Nancy O'Shea— Product User, Community Expert & Moderator

Signaler · Oct 18, 2020

It's good to see you are NOT using Bootstrap, a horrible and bloated solution indeed and simply no need for simple websites or complex ones, come to that. Bootstrap is around 2 years out of date, even taking into consideration v5 which has recently been released, without support for css grid, shocking!!

Your requirement is a simple 2 minute fix.

Wrap your #left_column and #right_column <divs> in a <section></section> tag with a class of 'main' as below:

</div>

</div>

</section>

Then add the main css selector to your css styles:

.main {
display: flex;
flex-wrap: wrap;
}

Next amend your #left_column and #right_column css to as below:

#left_column{
flex-basis: 65%;
background-color: #fefbe6;
padding: 10px;
}

#right_column{
flex-basis: 35%;
background-color: #fab475;
padding: 10px;
}

Then add css media queries directly AFTER the #left_column and #right_column css to re-arrange the divs for mobile devices:

Media@mercycity.church screen and (max-width: 768px) {
#left_column{
flex-basis: 100%;
}
}

Media@mercycity.church screen and (max-width: 768px) {
#right_column{
flex-basis: 100%;
}
}

Lastly add the below at the very start of your css stylesheet (This zeros out the padding/margin on all the elements, which is good practice)

* {
box-sizing: border-box;
}

You should also consider making your banner image responsive by adding the below css selector:

#banner img {
max-width: 100%;
height: auto;
}

Signaler · Oct 18, 2020

It's looks like you're petitioning for sainthood. I'll put in a good word with the archdiocese 🙂

Meanwhile, this isn't going to work with OPs current CSS which as you probably know contains fixed widths and floats. I recommend getting rid of the old stylesheet.

Nancy O'Shea— Product User, Community Expert & Moderator

Signaler · Oct 18, 2020

Meanwhile, this isn't going to work with OPs current CSS which as you probably know contains fixed widths and floats. I recommend getting rid of the old stylesheet.

Shows how much Bootstrap has warped your ability to read code....... there are no fixed widths in the OPs current code, apart from 1 image, which is unrelated. The code which exists is perfectly fixable and I've remove the floats and replaced them with a flex solution. The floats which remain are the perfect solution to float the images, which is what float was intended to do, not put <divs> side by side.

Just telling the truth.....I know Bootstrappers don't want to hear that, so its a totally expected response.

Signaler · Oct 18, 2020

Os, put your readers on.

#container {width: 960px} is going to look like a postage stamp on 4 and 5k displays. Also why 2 banner images? What's that about?

Give me a Bootstrap developer any day. At least I don't have to guess what thought process went into the project. Bootstrap is a logical, common sense approach to building responsively. Anybody who says otherwise is missing the bigger picture.

Nancy O'Shea— Product User, Community Expert & Moderator

Signaler · Oct 18, 2020

Os, put your readers on.

#container {width: 960px} is going to look like a postage stamp on 4 and 5k displays. Also why 2 banner images? What's that about?

That's a typo error in the forum by the OP. If you actually take a few seconds to look at the linked stylesheet at the url posted by the OP you'll see its - max-width: 960px; (I do my homework, not just jump in with a Bootstrap solution).

Actually the banner image being in 2 slices works as you are able to re-position one image beneath the other on smaller screen widths. If it was one large image then the image would become too small on smaller screens. So whether by judgement or mistake its a solution which works better than one large image.

Everyone knows Bootstrap is bloated, uses meaningless markup/css classes, myriads of inline css garbage, which makes management troublesome. The majority of Bootstrap developers admit that and hate it but its a case of using something horrible to get the work done faster (which I dont believe is necessarily so, especially if you are a good coder). The Bootstrap themes are even more bloated and waste mobile bandwidth. You will certainly have to re-write a ton of Bootstrap css to make a Bootstrap built website look how you want it to look, which to me defeats the objective of using the default css styling of a framework. Writing a responsive grid these days is about the most simplest of exercises you can do. If you want to take advantage of the js modules in Bootstrap then you'll never move on from those, there's a whole new world out there with exciting solutions beyond what Bootstrap can offer as default, you either want to take advantage of that or you just keep on recycling the same dreary constructions and using the same tired components.

Signaler · Oct 18, 2020

I know that you have stated that you do not want to use Bootstrap. Maybe I can convince you otherwise.

The Bootstrap framework is desgned to help us to concentrate on high level functionality. This is because any low-level functionality is taken care of by Bootstrap. This allows developers like Nancy and myself, to produce quality websites in a fraction of the time. Copy and paste the following code into a new Dreamweaver document and test in a browser.

<!doctype html>

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

<h1>Busted Computer</h1>

</div>

</header>

<main>

<p>Top div is 960px wide.<br>This is the left column sized at 65% width.</p>

<p>Random text lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam urna odio, ultrices ut suscipit vitae, lobortis non nisi. Random text lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam urna odio, ultrices

ut suscipit vitae, lobortis non nisi.</p>

<p>How to create equal height columns and widths as the screen size changes?</p>

<p>Below is not working for me. I have removed them from the source as I cannot get it to work. Example below is what I came across at W3 Schools.</p>

<p>How To - Equal Height<br>http://w3schools-fa.ir/howto/howto_css_equal_height.html</p>

</div>

<p>This is the right column sized at 30% width.Random text lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

</main>

</body>

</html>

The result:

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Signaler · Oct 18, 2020

To Ben: I am low level and barely functional : )

Thanks to all for your help. It looks to be working now : )
I used Osgood suggestions.

I sse equal height columns in a pc screen. In cell phone, the right column drops below left and is not equal sized in height, just to the last line of text, but that is fine.
http://www.davidshelpsite.com

Question on flex-basis:
I use Dreamweaver CS6 and do not see the properties of it.
I see a 2nd instance of #left_column{ and #right_column{ but no

properties. Is it because CS6 is old and does not know about Flex-

basis?

The reason I have 2 seperate images in the banner (top) is the single

image is too big by itself and will shrink too much so I have 2 images

so the 2nd one will fall below the first as the screen size shrinks and they will for most part be

equal size. The 2nd image (Computer) does shrink more then the

Busted image does. This is only apparent in a cellphone screen held

vertical. It looks fine horizontal. I write these pages and store them away as I will not remember all the various how to's and everyone seems to have a different take on writing the code for a webpage when you come across how' to's on the internet.

Signaler · Oct 18, 2020

CS6 is 8-9 years outdated. It doesn't support modern Flexbox or Grids. Use CS6 as your code editor. Use your browsers to test results. DO NOT rely on Design View.

Nancy O'Shea— Product User, Community Expert & Moderator

Signaler · Oct 18, 2020

Nancy, your website looks good : )

I see your logo Alt-Web is a big image on the main screen and a small image when viewed by itself with an extension of .svg
I should be using that instead of a jpg or png.

Signaler · Oct 19, 2020

It doesn't really matter if you use jpg, png or svg. svg is the preferred method these days for logos and graphics as images will keep their sharpness on any sized device, plus you can manipulate the images colors with css etc, without having to redo the image in an image editing tool, but its not that critical, in my opnion, yes if it causes you no extra work, use svg for logos and graphics.

I dont know what Bens 'high level' fuctionality is to be honest. Code is code and using streamlined code, manually-coded is going to allow you to start thinking outside of the box, rather than be confined to the box, which is what Bootstrap really is forcing you into doing. You know, much like a robot, not really learning much as you go. Sure if you want to be one of those users that likes just 'sticking cherries on top of a cake' in a production line then by all means use Bootstrap. If you want to be the person actually leading by example then learn to code, you will not regret it. Just depends on how serious you are in terms of web-development, thats what it comes down to in the end.

Signaler · Oct 19, 2020

I use SVG web graphics whenever possible. SVG images have many advantages because they are math based, not pixel based. The result is smaller file size and resolution independence which is just a fancy way of saying they don't become pixelated when rescaled.

Source: https://en.wikipedia.org/wiki/Scalable_Vector_Graphics

SVG is ideal for flat color, hard edged graphics like logos, icons, shapes, infographics, text, drawings & cartoons. However, SVG is not suitable for soft edged photos, gradients or complex bitmaps. Use Illustrator or Inkscapse to create vectors and then export to SVG code.

SVG code can be further edited in Dreamweaver to add animation or interactivity.

Nancy O'Shea— Product User, Community Expert & Moderator