Responsive Design

Explorer ,
Apr 24, 2019 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.

Views

397

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
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Apr 24, 2019 Apr 24, 2019

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=dev

...

Likes

Translate

Translate
Adobe Community Professional ,
Apr 24, 2019 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
community guidelines
Explorer ,
Apr 24, 2019 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
community guidelines
Adobe Community Professional ,
Apr 24, 2019 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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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
community guidelines
Adobe Community Professional ,
Apr 24, 2019 Apr 24, 2019

Copy link to clipboard

Copied

LATEST

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, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

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
community guidelines