Dipping my toe in responsive site design for mobile in 2018 (am I doing it right?)

What if I just want to make a div go away if there's no room to accommodate it, regardless of device?

By no room, I mean "whatever would otherwise produce an horizontal scrollbar".

Do I have to refer to a specific screen resolution or viewport width, or is there a way to tell the browser "if h-scrollbar, then this specific class=display:none"?

EDIT: Could this if statement not also be handled in the php file itself, rather than the stylesheet, so that the DIV itself is never even read by the browser, rather than read but not displayed, which is what handling it in the stylesheet does?

Trial & error was sort of  OK when everyone had fixed width pages and same sized displays.  But that's not going to work in RWD.   You need a very clear vision of how your site should work on Mobile, Tablet and Desktop.    If you don't know what you want beforehand, you can't create it with code.

Some people use a  prototyping tool  like Adobe XD or Photoshop to design artboards.  Or you can just put your ideas down on paper.   Whatever.  The important thing is to know what you want before you start building it.

I use a mobile-first framework called Bootstrap because it works well and saves a lot of coding time.   Some people will tell you Bootstrap is overly complex and bloated.  If you're a decent coder and understand how Bootstrap works, it's not complex.   My RWD sites are performing just fine with it. 

Bootstrap 4 Tutorial

Dreamweaver supports Bootstrap.

Design responsive websites using Bootstrap

Another option is to buy a commercial Template or layout system that you can use in DW. 

Responsive Web Design Extensions, Apps, Add-ons and Plugins for Dreamweaver

If you're good at picking up CSS, Paula mentioned CSS Grid. Here is a very simple responsive layout using Grid that you can save and study:

http://www.projectseven.com/products/staging/pvii-grid/base.htm

We also have automated page-building tools that install into Dreamweaver. Currently, our flagship product (Harmony) uses the Flexbox specification and is far more efficiently coded (and easy to use) than the bloated Bootstrap CSS that comes with the latest versions of Dreamweaver.

And now for something completely controversial, sorry that should have been different .

As Jon said every reply you get will be from a different viewpoint. I start with desktop, but for a different reason than Osgood. Hi-dpi monitors and smart TVs are becomming more and more popular in use for web browsing, add to those games consoles, which have browsers built in, (xbox=IE11 and Edge, ps3/4=Chrome but older versions), user base for all such devices all estimated between 5-12%.

Starting with desktop allows me to start at a middle point in user possibilities, (mobile, tablet, Pro tablets/laptops, desktop, larger screens).

The simplest method to use is Flexbox as this can go from mobile to anything else, without media-queries if necessary, (much better with one or two). Another way is to use flexbox for components for css grids, that way your site will fallback to flexbox, (if done correctly) if required, and use a css layout which has many possibilities, (css grids).

No matter what you choose though, there is a learning curve involved, even if you use the old floats method of layout.

https://forums.adobe.com/people/Under+S.  wrote As mentioned in some of my other recent threads, I'm a career designer who picked up the HTML/CSS he needed along the way (usually via trial & error). With regards to adapting the layout to mobile, I made sure the base layout was responsive enough to at least look great on both desktop and tablets (which really means landscape and portrait). I'm very happy with the results on those two devices. Phones, on the other hand... well, they get the same thing the tablet gets, only at a fraction of the size. Obviously, this is far from ideal. The layout holds together just fine, and LOOKs nice, but some buttons are too small to even read. I was hoping to avoid mobile-specific code (by making the base layout so flexible it could accommodate anything) but it looks like I'm not going to be able to avoid showing/hiding different elements based on whether or not we're on : A phone, or Literally anything else. Googling the subject reveals the most common solution to this is a SEPARATE STYLESHEET for mobile (or in my case, just the phones)... single-stylesheets containing conditional statements don't seem to be quite as popular. I did not find much about that. If I go the "2 stylesheets" way, my first instinct is to duplicate the affected classes from the regular stylesheet to the phone stylesheet, and simply changing the values (so they override the original), making sure the phones stylesheet is loaded after the regular one in the <head>. Would that be the right way to do it? So the phones stylesheet only ends up containing 5 or 6 classes (ie, the affected ones)? Thanks!

I always keep my media queries in the 1 stylesheet, much easier to manage if everything is together - organisation is 99% of web-development. Dont become complacent as it will cost you a lot of time later. I see a number of really crap css stylesheets where element selectors are unorganised, dotted all over the place - keep them together and in roughly the same order as they appear in your page - saves masses of time when you come to manage the website later on:

/* DESKTOP */

.wrapper {

background-color: red;

}

/* TABLET */

@media screen and (max-width: 768px) {

.wrapper {

background-color: yellow;

}

}

/* SMARTPHONE */

@media screen and (max-width: 480px) {

.wrapper {

background-color: orange;

}

}

You should probably start off with mobile first rather than desktop first BUT personally I like to construct the desktop first (all singing dancing version) and then take away the elements not required from the smaller devices, rather than add the elements for desktop after, just seems more logical to me.  Others have different views about the workflow.