Known Participant

Answered

Responsive Design

Forum|Forum|6 years ago
April 24, 2019
4 replies
652 views

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.

This topic has been closed for replies.

Correct answer Nancy OShea

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 OShea

Correct answer

Community Expert

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— Product User & Community Expert

Nancy OShea

Community Expert

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

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

Nancy O'Shea— Product User & Community Expert

acobbcarthagemillsAuthor

Known Participant

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.

Ben M

Community Expert

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.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded