Highlighted

Responsive Design

Explorer ,
Apr 24, 2019

Copy link to clipboard

Copied

I have a static PHP page that has a column on the left with images and on the right with text. I want to make it responsive, so use css like 'float left', but I need to control the space between the columns and how close the columns are to the edges of the page. Is there a tutorial for that for dreamweaver? It's in tables now. Thanks.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

acobbcarthagemills  wrote

I have a static PHP page that has a column on the left with images and on the right with text. I want to make it responsive...

In this Bootstrap 4 example, the  layout is 1 col on xs, 2 cols on sm & md, 4 cols on lg & xl.  With Flexbox Order, we can keep text & images correctly stacked on mobile devices.

This is the working code I used.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 4 Flexbox Order</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<style>

html, body { height: 100%; }

/**Scale fonts for any screen size**/

body {  font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));

line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));

}

/**flexbox stack order on mobile devices**/

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

.a { order: 1; }

.b { order: 2; }

.c { order: 4; }

.d { order: 3; }

.e { order: 5; }

.f { order: 6; }

.g { order: 8; }

.h { order: 7; }

</style>

</head>

<body>

<nav class="text-center">Navigation goes here...</nav>

<header class="text-center">Header goes here....</header>

<hr>

<div class="container-fluid">

<div class="row row-eq-height">

<!--1 COLUMN ON XS,

2 COLUMNS ON SM & MD, 4 COLUMNS ON LG -->

<div class="col-sm-6 col-lg-3 align-self-center a"> <img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder"> </div>

<div class="col-sm-6 col-lg-3 align-self-center b">

<h3>Image 1 Text</h3>

<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>

</div>

<div class="col-sm-6 col-lg-3 align-self-center c">

<h3>Image 2 Text</h3>

<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>

</div>

<div class="col-sm-6 col-lg-3 align-self-center d"> <img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder"> </div>

<div class="col-sm-6 col-lg-3 align-self-center e"> <img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder"> </div>

<div class="col-sm-6 col-lg-3 align-self-center f">

<h3>Image 3 Text</h3>

<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>

</div>

<div class="col-sm-6 col-lg-3 align-self-center g">

<h3>Image 4 Text</h3>

<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>

</div>

<div class="col-sm-6 col-lg-3 align-self-center h"> <img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder"> </div>

</div>

<hr>

<footer class="text-center">Footer goes here...</footer>

</div>

<!--First jQuery then Popper then Bootstrap 4-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Popper JS-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<!--Bootstap 4 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body>

</html>

TOPICS
Learn Dreamweaver

Views

322

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Responsive Design

Explorer ,
Apr 24, 2019

Copy link to clipboard

Copied

I have a static PHP page that has a column on the left with images and on the right with text. I want to make it responsive, so use css like 'float left', but I need to control the space between the columns and how close the columns are to the edges of the page. Is there a tutorial for that for dreamweaver? It's in tables now. Thanks.

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

acobbcarthagemills  wrote

I have a static PHP page that has a column on the left with images and on the right with text. I want to make it responsive...

In this Bootstrap 4 example, the  layout is 1 col on xs, 2 cols on sm & md, 4 cols on lg & xl.  With Flexbox Order, we can keep text & images correctly stacked on mobile devices.

This is the working code I used.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 4 Flexbox Order</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<style>

html, body { height: 100%; }

/**Scale fonts for any screen size**/

body {  font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));

line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));

}

/**flexbox stack order on mobile devices**/

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

.a { order: 1; }

.b { order: 2; }

.c { order: 4; }

.d { order: 3; }

.e { order: 5; }

.f { order: 6; }

.g { order: 8; }

.h { order: 7; }

</style>

</head>

<body>

<nav class="text-center">Navigation goes here...</nav>

<header class="text-center">Header goes here....</header>

<hr>

<div class="container-fluid">

<div class="row row-eq-height">

<!--1 COLUMN ON XS,

2 COLUMNS ON SM & MD, 4 COLUMNS ON LG -->

<div class="col-sm-6 col-lg-3 align-self-center a"> <img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder"> </div>

<div class="col-sm-6 col-lg-3 align-self-center b">

<h3>Image 1 Text</h3>

<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>

</div>

<div class="col-sm-6 col-lg-3 align-self-center c">

<h3>Image 2 Text</h3>

<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>

</div>

<div class="col-sm-6 col-lg-3 align-self-center d"> <img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder"> </div>

<div class="col-sm-6 col-lg-3 align-self-center e"> <img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder"> </div>

<div class="col-sm-6 col-lg-3 align-self-center f">

<h3>Image 3 Text</h3>

<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>

</div>

<div class="col-sm-6 col-lg-3 align-self-center g">

<h3>Image 4 Text</h3>

<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>

</div>

<div class="col-sm-6 col-lg-3 align-self-center h"> <img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder"> </div>

</div>

<hr>

<footer class="text-center">Footer goes here...</footer>

</div>

<!--First jQuery then Popper then Bootstrap 4-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Popper JS-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<!--Bootstap 4 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body>

</html>

TOPICS
Learn Dreamweaver

Views

323

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 24, 2019 0
Adobe Community Professional ,
Apr 24, 2019

Copy link to clipboard

Copied

There's no one tutorial that would explain your layout and it depends on how you want to code your layout. You have options like the CSS grid, or frameworks like Foundation and Bootstrap. This can be a heated debate at times about which is best.

In it's most basic form, I don't think I have a 100% grasp around changing to responsive code improving a 2 column layout like you are asking. Can you show mockups or a drawing of what you are expected with responsive design to change on your mobile layout or what you think it will do for you?

As for the spacing - that is done with basic CSS padding and margins. A responsive layout isn't much different than a table layout on a desktop in that things are laid out in a grid.  You would just use CSS padding and margins to control how close elements are in relation to one another.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2019 1
Explorer ,
Apr 24, 2019

Copy link to clipboard

Copied

You had asked about the improvement that responsive design would offer...

the improvement would be, that if viewed on a mobile device, the text would shift under the image so that it would be a 1 column layout.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2019 0
Adobe Community Professional ,
Apr 24, 2019

Copy link to clipboard

Copied

Bootstrap with CSS Flexbox is better than floats.   You have much more control.

https://codepen.io/ondrejsvestka/pen/gWPpPo

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2019 0
Adobe Community Professional ,
Apr 24, 2019

Copy link to clipboard

Copied

acobbcarthagemills  wrote

I have a static PHP page that has a column on the left with images and on the right with text. I want to make it responsive...

In this Bootstrap 4 example, the  layout is 1 col on xs, 2 cols on sm & md, 4 cols on lg & xl.  With Flexbox Order, we can keep text & images correctly stacked on mobile devices.

This is the working code I used.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Bootstrap 4 Flexbox Order</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">

<style>

html, body { height: 100%; }

/**Scale fonts for any screen size**/

body {  font-size: calc(16px + (26 - 16) * ((100vw - 300px) / (1600 - 300)));

line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));

}

/**flexbox stack order on mobile devices**/

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

.a { order: 1; }

.b { order: 2; }

.c { order: 4; }

.d { order: 3; }

.e { order: 5; }

.f { order: 6; }

.g { order: 8; }

.h { order: 7; }

</style>

</head>

<body>

<nav class="text-center">Navigation goes here...</nav>

<header class="text-center">Header goes here....</header>

<hr>

<div class="container-fluid">

<div class="row row-eq-height">

<!--1 COLUMN ON XS,

2 COLUMNS ON SM & MD, 4 COLUMNS ON LG -->

<div class="col-sm-6 col-lg-3 align-self-center a"> <img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder"> </div>

<div class="col-sm-6 col-lg-3 align-self-center b">

<h3>Image 1 Text</h3>

<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>

</div>

<div class="col-sm-6 col-lg-3 align-self-center c">

<h3>Image 2 Text</h3>

<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>

</div>

<div class="col-sm-6 col-lg-3 align-self-center d"> <img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder"> </div>

<div class="col-sm-6 col-lg-3 align-self-center e"> <img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder"> </div>

<div class="col-sm-6 col-lg-3 align-self-center f">

<h3>Image 3 Text</h3>

<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>

</div>

<div class="col-sm-6 col-lg-3 align-self-center g">

<h3>Image 4 Text</h3>

<p>Some quick example text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat neque sit velit veniam suscipit obcaecati omnis ipsa aperiam molestiae sunt perspiciatis, error nostrum aspernatur, veritatis hic rem cumque minus odit.</p>

</div>

<div class="col-sm-6 col-lg-3 align-self-center h"> <img class="img-thumbnail" src="https://dummyimage.com/500x425" alt="placeholder"> </div>

</div>

<hr>

<footer class="text-center">Footer goes here...</footer>

</div>

<!--First jQuery then Popper then Bootstrap 4-->

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

<!--Popper JS-->

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<!--Bootstap 4 JS-->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

</body>

</html>

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 24, 2019 0