Styles, with divs, please answer for me?

Report · Sep 18, 2017

Hello just curious how do you mimmic this picture using Divs or HTML5 Elements using article,section an what not? I know tables is out dated.

Report · Sep 18, 2017

Use css flexbox, view the code for this demo -

http://www.pziecina.com/Adobe/lightbox/lightbox.html

Report · Sep 18, 2017

Ok this is close to what I need how did you separate them so they are not next to each other? When you use flex?

Sent from my Verizon, Samsung Galaxy smartphone

Report · Sep 18, 2017

change the margin values for the article elements.

Report · Sep 18, 2017

After you change the margin css, is this the way to use the flex code to make it look like there in rows and columns?

Sent from my Verizon, Samsung Galaxy smartphone

Report · Sep 18, 2017

Thats the best part about flexbox, providing you use row wrap it automatically flows from rows to columns.

Resize the browser to see this in the demo.

Report · Sep 18, 2017

Oh ok where can you learn about flex styles ?

Sent from my Verizon, Samsung Galaxy smartphone

Report · Sep 18, 2017

Look in the resources section of -

http://caniuse.com/#feat=flexbox

for anyone using browsers below 25 inch, (not 4k) or mobile devices flexbox is the most simple method available for building responsive layouts. For anything over 25 inch screen then css grid layouts is the up-comming best method, (in 1-2 years time).

Report · Sep 18, 2017

pziecina wrote
Thats the best part about flexbox, providing you use row wrap it automatically flows from rows to columns.
Resize the browser to see this in the demo.

pziecina Thank you for informing me about flex

Report · Sep 18, 2017

Like this, using Flexbox:

<!DOCTYPE html>

<html>

<head>

<title>Example</title>

<style>

* {

box-sizing: border-box;

}

body {

font-family: arial, helvetica, sans-serif;

font-size: 14px;

line-height: 20px;

}

.services_wrapper {

width: 85%;

margin: 0 auto;

}

.services_wrapper h3 {

font-size: 30px;

margin: 0;

padding: 30px 0;

font-weight: 400;

text-align: center;

}

.services {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

-webkit-box-pack: justify;

-ms-flex-pack: justify;

justify-content: space-between;

}

article {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

width: 29%;

border: 1px solid #ccc;

padding: 25px;

text-align: center;

}

@media screen and (max-width: 768px) {

article {

width: 100%;

margin: 0 0 40px 0;

}

article h2 {

margin: 0;

padding: 0;

font-size: 18px;

line-height: 22px;

}

article p {

margin: 0;

padding: 0;

font-size: 14px;

line-height: 22px;

color: #808080;

}

hr {

border-top: 2px solid #C7A75E;

width: 30%;

}

</style>

</head>

<body>

<h3>Our Services</h3>

<h2>Market Research</h2>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>

</article>

<h2>Investment Management</h2>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>

</article>

<h2>Sales & Training</h2>

<hr>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>

</article>

</div>

</section>

</body>

</html>

Report · Sep 18, 2017

Thank you

Report · Sep 18, 2017

Bootstrap version 4 and Cards can do that.

<!doctype html>

<head>

<title>Bootstrap 4.0, Cards Demo</title>

<style>

html, body { height: 100% }

</style>

</head>

<h3 class="text-center">Vertically Centered Content</h3> <p>lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

</div>

<h3 class="text-center">Vertically Centered Content</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque iusto veritatis minus, maiores odio.</p>

</div>

<h3 class="text-center">Vertically Centered Content</h3> <p>Cumque iusto veritatis minus, maiores odio.</p>

</div>

</body>

</html>

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Sep 18, 2017

No comment, ().

Report · Sep 18, 2017

Thanks

Report · Sep 18, 2017

Thank you guys sorry took me a while to respond i wasnt on my computer

Adobe Community

Styles, with divs, please answer for me?

1 Correct answer