Help With Flexbox

[Hiker]

I'm starting a new thread on my tables to flexbox issue. W3 validator threw up a bunch of errors with my old table. I've since converted it to a flexbox. I rechecked on the validator and only a couple stray tags were detected, which have since been fixed.

I got my flexbox half right. It displays fine on a laptop, two rows which stack if the window  is resized.  However it's just a single column on mobile (tablet of phone) in either portrait or landscape mode, whereas I rather have it stack two or more wide. Any help I find on Google seems to point me towards displaying a single column on mobile which I seem to have covered

I just changed servers so changes to code can take hours to take effect which is really frustrating.  If someone can give me a hand having it display the way I prefer, I'd really appreciate it.  If it's OK, I'll just post the link to the page I need help with. https://johnaldenclub.com/floorplans.html 

Here's the the code that I used for the flexbox on the member.css file.

 /* Flexbox row styles */
  .row-flex {
    margin: 20px auto;
    max-width: 1100px;
    display: flex;
    flex-wrap: wrap;
  }
  .row-flex div {
    border: 1px dashed gray;
    flex: 1 1 100px;
    text-align: center;
    padding: 12px;
  }

To add a border to the images.

img {
  border: 1px solid #555;
}

 

Also, in the head.
"<meta name="viewport" content="width=device-width, initial-scale=1">

 

Edited November 29, 2020 by Hiker
Forgot to follow, too late.

[Hiker]

I think I may need a media query, will something like this help?

@media screen and (max-width: 575px) {
   {
    display: block;
  }

 }

Edited November 29, 2020 by Hiker

[dsonesuk]

You need to add selector above inner curly brace.

[Hiker]

3 hours ago, dsonesuk said:

You need to add selector above inner curly brace.

To be honest I'm not sure where and what you mean.

I was able to run the w3 validator again. It confirmed the stray end tags are gone but now has two new errors concerning the media query above. If I try to edit the code the text in the Atom editor turns purple which I believe is an error.

 

Edited November 30, 2020 by Hiker

[dsonesuk]

 

/*This refers to browser viewport width*/       

@media screen and (max-width: 575px) {
  /*this should refer to a selector of element/s, class/s, id name to apply style display block, as you normally would ie*/

 div, .classname, #idname{
    display: block;
  }

 }

Edited November 30, 2020 by dsonesuk

[Hiker]

Of course, l'll try it.

[Hiker]

Back again.  

Being pretty much a novice  I have a seriously bad habit of tweaking. The problem is the site was moved to a new server/service with GoDaddy and it takes hours to see any revisions on the web. I mainly use Dreamweaver CS6 to edit and put. I've also been using Atom live server which allows to to see results instantly. Well, after a number of revisions, I opened the site and most images, either weren't showing or broke. I really don't believe it as anything on my part because they still displayed properly on live server. A few calls to GoDaddy were no help. Four different browsers, a phone and a tablet showed varied results. I went over everything, checked with W3 Validator and for the most part was coming out clean. I may have compound the issue by deleting a few files from the server (html, css, htaccess) and reuploaded the files right after,  I was confident were OK. I also put a time stamp as a comment. Even though it looked like these files were on the remote server, on right click source view, the time stamps said otherwise. Another couple hours chatting with a tech "that had limited access" finally he put the new files, and at last  the site started displaying correctly. The tech claimed the "configuration file" was causing the problem. Not totally convinced  I did tweak the htaccess file, and eliminated all old redirects and made sure the code had proper syntax.

It's mostly displaying the way I wanted, but still needs a little help. On a phone the flexbox seems to be working as designed  two images wide by eight tall in portrait view, and 4x4 in landscape. The last remaining "problem"  is on a tablet, the images are still 16 images tall.

Thanks for all the help and encouragement!  

 

 

[dsonesuk]

If you use media queries the idea is for every device width extra small, small mobiles, medium/tablet, desktop, extra large desktop, you have to define using media queries the size of parent element holding the images, if you use only one that size can be carried on to the rest, depending on min-width, max-width queries you use and how you positioning the order, one has sizes in ascending order, the other descending order.

I personally don't think you require it for this, just extend full width, and let the images stack themselves naturally, you can add margins, or use justify-content: to space themselves evenly, and align-item: to center.

You might just use media queries to adjust image sizes or spacing depending on device, but that's it.

With the slow revision update, you do clear history? ctrl-F5, if your host caches content on the server, temporary turn it off! must be option for that!

 

DON'T rely on Dreamweaver preview, always view through a actual browser.

Use F12 web developer tools to make changes live! (some browser have ability to store the changes you made, so you can copy changes to your css file) use mobile toggle toolbar, which gives you the ability to view changes in many device sizes, (portrait and landscape).

Edited December 3, 2020 by dsonesuk

[Hiker]

13 hours ago, dsonesuk said:

If you use media queries the idea is for every device width extra small, small mobiles, medium/tablet, desktop, extra large desktop, you have to define using media queries the size of parent element holding the images, if you use only one that size can be carried on to the rest, depending on min-width, max-width queries you use and how you positioning the order, one has sizes in ascending order, the other descending order.

I personally don't think you require it for this, just extend full width, and let the images stack themselves naturally, you can add margins, or use justify-content: to space themselves evenly, and align-item: to center.

You might just use media queries to adjust image sizes or spacing depending on device, but that's it.

With the slow revision update, you do clear history? ctrl-F5, if your host caches content on the server, temporary turn it off! must be option for that!

 

DON'T rely on Dreamweaver preview, always view through a actual browser.

Use F12 web developer tools to make changes live! (some browser have ability to store the changes you made, so you can copy changes to your css file) use mobile toggle toolbar, which gives you the ability to view changes in many device sizes, (portrait and landscape).

Thanks for the tips. The page looks horrible on Dreamweaver CS6 in Design view, but somewhat better in Live mode. I mostly use it for  it's FTP capabilities.  If you haven't tried it yet, check out Atom text editor. It has a bunch of add-on called packages including a live server which instantly updates any changes to what your working on upon save on your default browser. I believe it also has an FTP package which I'll try down the line. There's a very helpful video on Atom on Youtube which explains set-up and a few essential packages by Traversy Media.

Everything seems to be working correctly now, even on a tablet. Check it out.  There's really not much left to be done except for taking a few better images later in the spring, so it should be safe from further destruction for now. 😉

Edited December 4, 2020 by Hiker
Added insight.

[dsonesuk]

We use Atom at work.

[Hiker]

4 hours ago, dsonesuk said:

We use Atom at work.

Do you use an FTP package? I have remote-ftp but I can't connect, it's flagging "secureOptions": null,

[dsonesuk]

You just need add ftp host  and password settings correctly to ftp config file.