Flexbox - Resizing (shrinking) Live View area works, but not in browser

Participant ,
Jan 26, 2022 Jan 26, 2022

Copy link to clipboard

Copied

Hi,

I am using DreamWeaver 21.2, and I am trying to learn how to use Flexbox to create a simple layout in which I have three rows of three rectangles on a larger screen, but that adapts to a single column for smaller screens.

 

In Live View in DreamWeaver, I am able to see the change to the single column layout if I drag the right-border of the Live View viewing area to the left until it becomes smaller than the breakpoint I've defined in my media query.

 

I have the behavior I want working in Live View in Dreamweaver, but when I open my file in a Browser (either Chrome or Edge), I am not able to size my browser window small enough to trigger this behaviour.  There appears to be a limit imposed on how narrow I can make the browser window that prevents me from making it small enough to trigger the breakpoint defined in my media query.

 

If anyone has an idea why I would be able to demonstrate the effect I want in Live View but not in either browser, I would appreciate any suggestions as to how I might be able to make this work in the browser..

 

Thanks in advance,
Paul

TOPICS
Browser , Preview

Views

168

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 ,
Jan 26, 2022 Jan 26, 2022

Copy link to clipboard

Copied

What breakpoint are you using?   Upload problem page to your remote server and post the URL.

 

I typically build for mobile-first and then add media queries for tablets and desktops.   Or, use CSS Grids.  In many ways, they're easier than Flexbox.

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grid Evenly Distributed Layout</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
width: 95%;
margin: 0 auto;
padding: 2%;
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: minmax(150px, auto);
grid-gap: 1em;
border: 1px dotted silver;
}
.module {
background: #eaeaea;
display: flex;
align-items: center;
justify-content: center;
min-height: 200px;
}
img {
vertical-align: baseline;
display: block;
max-width: 100%;
}
</style>
</head>

<body>
<h3>Welcome to CSS Grids</h3>
<div class="grid">
<div class="module">1</div>
<div class="module">2</div>
<div class="module">3</div>
<div class="module">4</div>
<div class="module">5</div>
<div class="module">6</div>
<div class="module">7</div>
<div class="module">8</div>
<div class="module">9</div>
<div class="module">10</div>
<div class="module">11</div>
<div class="module">12</div>
<div class="module">13</div>
<div class="module">14</div>
<div class="module">15</div>
</div>
</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
LEGEND ,
Jan 26, 2022 Jan 26, 2022

Copy link to clipboard

Copied

Use the developer tools in Chrome to test.

 

Mac:

View > Developer > Developer Tools > Select the tablet/smartphone icon in the top left corner, then drag the window.

 

I don't know about PC but would most likely be similar process.

 

Not sure why Chrome stops at a certain window width if you don't use the developer tools, maybe the content/tabs in the browser default bar can't reduce down any further. I'm sure on older versions it reduced more.

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 ,
Jan 26, 2022 Jan 26, 2022

Copy link to clipboard

Copied

For years now, I have used this Web Developer Add-on for Firefox by Chris Pederick.  Among other things, it has a Responsive Design Mode which I use quite often. 

https://addons.mozilla.org/en-US/firefox/addon/web-developer/

 

image.png

 

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
Participant ,
Jan 31, 2022 Jan 31, 2022

Copy link to clipboard

Copied

Hi Nancy, Osgood, and Lena,

 

Thank you very much for your replies, and I apologize it took me this long to follow up.  I have done a small amount of web design a long time ago, but now I am trying to learn how to create modern responsive layouts. I'd like to learn both Grid and Flexbox and have been reading up on each. 

 

The Flexbox tutorial I was trying to follow that prompted my question is at  https://www.freecodecamp.org/news/learn-flexbox-build-5-layouts/ level #1. It might be that this tutorial is a bit advanced for me at the current time. It asks you to use .scss for setting up your .css including the media queries, which I have never tried before. Anyway, I followed level #1 of this tutorial and in Dreamweaver Live View, I get the desired behavior of switching to a single column when I size the view port below 480 pixels. When I preview this in a browser (I tried Chrome so far), I am unable to size my broswer window small enough to make this happen. The developer tools in Chrome show three columns when I choose any of the phone options. I uploaded my files to http://pwkts.com if you don't mind taking a look. When I open this on my phone (a Samsung Galaxy S20 FE), I get three columns.

If you can suggest why this isn't working for me as expected, I would greatly appreciate it. If not, I'll just keep reading more, finding less advanced tutorials, and playing around with the developer tools you mentioned until I get it.

 

I greatly appreciate your help!

 

Best regards,
Paul

 

 

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 ,
Jan 31, 2022 Jan 31, 2022

Copy link to clipboard

Copied

A URL to your problem page online would be most helpful.

 

SCSS is NOT CSS code.  SCSS is preprocessed code that must be processed to normalized CSS for browsers to understand.

 

Dreamweaver supports preprocessors.  See this help article for details.

https://helpx.adobe.com/dreamweaver/using/css-preprocessors.html

 

If you derrive your code from CodePen, for example, click on the gear icon and select Normalize CSS before copying the code.

image.png

 

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
Participant ,
Jan 31, 2022 Jan 31, 2022

Copy link to clipboard

Copied

Hi Nancy, 

I have never tried using CodePen. I did refer the article you mentioned about using CSS pre-processors in Dreamweaver when I was trying to work through the tutorial. I felt like it was working for me as I would have expected - every time I made a change to the .SCSS file and saved it, my CSS file was automatically updated. I certainly would not rule out that I might have done something incorrectly, however.

 

Anyway, here is the url to my problem page if you don't mind taking a look...

 

http://pwkts.com

 

I appreciate your help.

 

Best regards,
Paul

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 ,
Jan 31, 2022 Jan 31, 2022

Copy link to clipboard

Copied

It works as expected for me.  1 Column on mobile, 3 columns on medium and higher.

 

image.png

 

image.png

 

 

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 ,
Jan 31, 2022 Jan 31, 2022

Copy link to clipboard

Copied

quote

Anyway, here is the url to my problem page if you don't mind taking a look...

http://pwkts.com

By @PaulKraemer1

 

I haven't any Samsung S20 SE right under hand right now, but works as expected on simulation

Birnou_0-1643661840725.png

 

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
LEGEND ,
Jan 31, 2022 Jan 31, 2022

Copy link to clipboard

Copied

I think a lot of your issues are because you have NOT declared the 'viewport' meta tag in your page.

 

Insert the bold line of code below BEFORE your <title></title> tag in the <head></head> section of the pages code.

 

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

 

Then try it again in your browser dev tools. The browser responsive dev tools will not work unless its present and it wont work on any mobile device without it.

 

Now onto additional other matters. You dont need to concern yourself with .scss that's just a lot of fluff used by egotistical developers who want to appear cleverer than thay actually are. The .scss file eventually gets compiled to a .css file bacause that's the only file the browser supports, so use vanilla css, not some junkie approach like SASS, which is overkill, over-engineering and bloats your website folder. Alright your techy nerds from Google or Farcebook etc might have a requirement for such workflows because they are multi-billion companies. Dont deploy workflows that dont suit the requirements.

 

I dont really know what this crap is either in your css file.

 

[class^="block-"] {
  display: flex;
  flex-direction: row;
  height: 27.3333333333vh;
  gap: 4vh; }
  @media (max-width: 480px) {
    [class^="block-"] {
      flex-direction: column;
      height: 500px; } }

[class^="box-"] {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 33.3333333333%;
  border: 2px solid black;
  border-radius: 10px;
  background-color: #c1c1c1; }

 

 

Its just a lot of nerdy overkill. Not sure where youre learning from but my advice would be to find another source of learning because this geezer seems to be using a sledgehammer approach to crack a nut and not one which is user-friendly to beginners.

 

 

 

If you want simpler approach:

 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Flexbox</title>
<style>
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
font-size: 45px;
margin: 0;
}
.container {
border: 20px solid #48CAE4;
padding: 25px;
}
.block {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.block > div {
display: grid;
place-items: center;
background-color: #f2f2f2;
flex-basis: 30%;
margin: 0 0 30px 0;
height: 300px;
border: 1px solid #ccc;
border-radius: 10px;
}
/* 768px Media Query */
@media screen and (max-width: 768px) {
.block > div {
flex-basis: 48%;
}
}
/* 480px Media Query */
@media screen and (max-width: 480px) {
.block > div {
flex-basis: 100%;
}
}
</style>
</head>

<body>
<div class="container">

<div class="block">

<div class="box"> A </div>
<div class="box"> B </div>
<div class="box"> C </div>


<div class="box"> D </div>
<div class="box"> E </div>
<div class="box"> F </div>


<div class="box"> G </div>
<div class="box"> H </div>
<div class="box"> I </div>

</div>

</div>

</body>
</html>

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
Participant ,
Jan 31, 2022 Jan 31, 2022

Copy link to clipboard

Copied

Hi Osgood,

 

You were exactly right. Adding the 'viewport' meta tag made it work as I had hoped. Thank you for pointing out that the tutorial I chose to follow is overly complicated and not well suited for a beginner. I appreciate your example. It certainly seems simpler. I am not sure I undersand the purpose behind using "display: grid" for ".block > div", but I'll keep reading until I do.

 

I really appreciate your help!

 

Best regards,
Paul

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
LEGEND ,
Jan 31, 2022 Jan 31, 2022

Copy link to clipboard

Copied

quote

I am not sure I undersand the purpose behind using "display: grid" for ".block > div", but I'll keep reading until I do.

 

 


By @PaulKraemer1

 

 

That is purely used to center the letter within the '.block' divs, its a simple way.

 

You could use:

 

display: flex;

justify-content: center;

align-items: center;

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
Participant ,
Jan 31, 2022 Jan 31, 2022

Copy link to clipboard

Copied

LATEST

Thank you Osgood !

 

You have been a huge help!!

 

Best regards,
Paul

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 ,
Jan 27, 2022 Jan 27, 2022

Copy link to clipboard

Copied

For my part, being rather application oriented, from experience, I prefer to have access to real external devices. However, the tool proposed by Chromium remains a very interesting tool and should be able to solve your problem.

https://developer.chrome.com/docs/devtools/device-mode/

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