Skip to main content
PaulKraemer1
Known Participant
Jan 26, 2022 10:04 PM UTC
Question

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

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

This topic is closed to new replies. Start a new post to keep the conversation going.

13 replies

Community Expert
L e n aCommunity Expert
Community Expert
Jan 27, 2022 5:56 PM UTC

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/

Translate
    osgood_
    Legend
    Jan 26, 2022 11:02 PM UTC

    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.

    Translate
      Nancy OShea
      Community Expert
      Nancy OSheaCommunity Expert
      Community Expert
      Jan 27, 2022 1:28 AM UTC

      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/

       

       

      Translate
      Nancy O'Shea— Product User & Community Expert
        PaulKraemer1Author
        Known Participant
        Jan 31, 2022 6:39 PM UTC

        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

         

         

        Translate
        Nancy OShea
        Community Expert
        Nancy OSheaCommunity Expert
        Community Expert
        Jan 26, 2022 10:33 PM UTC

        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>

         

        Translate
        Nancy O'Shea— Product User & Community Expert
          Terms & ConditionsAccessibility statement
          Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices