dsonesuk

first of all, NEVER use spaces in file names, use alternative of hyphen '-' or underscore '_', as in practise-css.html oor practise_css.html. secondary, this should be done on web server, WAMP for example not your computer filesystem.

I would imagine the problem is you have no content in body, so the height is 0, so the background image has no area to show. Try setting body and html elements to min-height: 100vh;

Are you confusing key sort (ksort with C,B,A), with value sort (asort 35,37,43)?.

You must know some server  language such as php to upload the file in the first place? You can get the date  in format of '20210630_' and add to start of filename that is gathered by the server language.

Might want to consider adding timestamp to filename, they should then be in order they where added

There's a position: right; Now! is there? must be short-code property for position: absolute;  on right? maybe? have to look it up! just can't keep up with all these new properties they come out with.

Yes! Because this

empty($_POST['name'])
   empty($_POST['email'])
   empty($_POST['phone'])
   empty($_POST['message'])

IS WRONG! Its structure does not make sense, they return true or false, ok! Now what? They require a if condition to check each is true ie 'empty' if so, return error message and return false to stop going any further. That is what my example showed, if you set any of these to = "";

$_POST['name'] = "fff";

$_POST['email'] = "AA";

$_POST['phone'] = "123";

$_POST['message'] = "WTH";

Empty Error message would show otherwise 'all fields filled' will show.

You are not checking name, email etc, for a specific value of true or false, and then return false only if any of the field are empty.

example:

 <?php
        $_POST['button'] = "Submit";
        $_POST['name'] = "fff";
        $_POST['email'] = "AA";
        $_POST['phone'] = "123";
        $_POST['message'] = "WTH";


        if (isset($_POST['button'])) {
            if (empty($_POST['name']) || empty($_POST['email']) || empty($_POST['phone']) || empty($_POST['message'])) {
                echo "You gotta fill in required fields of name, email, phone and message";
                return FALSE;
            } else { /* optional, just for testing */
                echo "all fields filled";
            }
        }
        ?>

Hi che, why are calling me suk? uk is the country of UK, Are you a bit odd?

Somewhere I don't know where, cus you can't identify the problem element with a picture, a element type or css property is forcing it to do exactly that!.

min-width: is wrong that value will never work and if you haven't bothered to remove any width properties that restrict the width from being responsive, surprise surprise, still won't work.

??? thats what it does? I suggest you use an array to store values, with an extra storage of currentcount, use that to check if zero or above. If you look through database field it will return to original value each time. You can also set a default value of 0.

No! that was a figure from out of the air. You mentioned a fixed width that you used before, use that if you like, its not my decision.

If whateverCount > 0, then subtract  1

You wanted a long menu text to not wrap and make the menu text container adjust to width of text content. That is exactly what you get! YOU CANNOT USE A FIXED WIDTH, THAT IS WHY WE REMOVED IT AND REPLACED WITH MIN-WIDTH. Your code still uses IN several places I might add, a fixed width, with overflow: hidden;  So if text extends beyond fixed width, the text will be clipped by using overflow: hidden. That is NOT! issue with my css, the issue is fixed width is still used.

FIXED WIDTH(width: 250px;) BAD.

MIN WIDTH (min-width: 250px;) GOOD!

and seriously, do you really need the font size and weight to be that humongous. 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

The user can enter whatever, But! what is shown that matches, for selection is predefined 

You can't delete absolute links, that is how WordPress works, they are all stored in the database.

AND! it works fine, i can see my css, and it does works! Try Ctrl+F5, to reload cached files of browser.

I just used there code to add white-space: property as part of styling.

.dropdown-menu, represents the actual element the class name is attached to, .dropdown-menu * represents with space the child elements and with * any child element tag type within parent class .dropdown-menu.

Just add to style.css or additional styling box that wordpress uses, ideally you would be using a child theme to separate from original theme thus avoid css being overwritten when theme updates.

OH dear! wordpress, uses absolute path links, everyone will now know where to hack your site! were doomed, doomed i tell you.

Right! NOW that we have something to work with!

.dropdown-menu, .dropdown-menu * {
    white-space: nowrap !important;
}

Just imagine how much time and posts would have been saved

What about a datalist or select dropdown of keywords that will sublist using datalist to the keyword selected.

I suggest use table or nested table to achieve the layout you want! I don't know if outlook ignores br tags, i do know its very strict on specific html  tags and css styling it will allow.

just hint

https://medium.com/email-design/outlook-rendering-issues-5-tips-to-ensure-your-emails-display-properly-9520b2456166

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
  border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the button to return the number of tr elements in the table.</p>
<form id="myform" class="one-filled-all-required">
<table id="myTable">
  <tr>
    <td>
    <select name="select1_1">
    <option selected value="">default</option>
    <option value="1">option #1</option>
    <option value="2">option #2</option>
   </select>
    </td>
    <td>
    <select name="select1_2">
    <option selected value="">default</option>
    <option value="1">option #1</option>
    <option value="2">option #2</option>
   </select>
    </td>
    <td>
    <input name="input1_1" type="text" value="">
    </td>
  </tr>
    <tr>
    <td>
    <select name="select1_1">
    <option selected value="">default</option>
    <option value="1">option #1</option>
    <option value="2">option #2</option>
   </select>
    </td>
    <td>
    <select name="select1_2">
    <option selected value="">default</option>
    <option value="1">option #1</option>
    <option value="2">option #2</option>
   </select>
    </td>
    <td>
    <input name="input1_1" type="text" value="">
    </td>
  </tr>
  </table>
</form>
<br> 
<form id="myform" class="one-filled-all-required">
<table id="myTable">
  <tr>
    <td>
    <select name="select1_1">
    <option selected value="">default</option>
    <option value="1">option #1</option>
    <option value="2">option #2</option>
   </select>
    </td>
    <td>
    <select name="select1_2">
    <option selected value="">default</option>
    <option value="1">option #1</option>
    <option value="2">option #2</option>
   </select>
    </td>
    <td>
    <input name="input1_1" type="text" value="">
    </td>
  </tr>
    <tr>
    <td>
    <select name="select1_1">
    <option selected value="">default</option>
    <option value="1">option #1</option>
    <option value="2">option #2</option>
   </select>
    </td>
    <td>
    <select name="select1_2">
    <option selected value="">default</option>
    <option value="1">option #1</option>
    <option value="2">option #2</option>
   </select>
    </td>
    <td>
    <input name="input1_1" type="text" value="">
    </td>
  </tr>
  </table>
</form>
<br> 
<script>

var y = document.querySelectorAll('.one-filled-all-required');
  if(y.length){
  		var vOneAllFilledclassLength = y.length; 
  	
  		for(i=0;i<vOneAllFilledclassLength;i++){
  			console.log(y[i].querySelector('table').rows.length);
  			
  			var vTableRowsCount = y[i].querySelector('table').rows;
   			for(j=0;j<vTableRowsCount.length;j++){
  				//vTableRowsCount[j].id="row_"+[j];
  				console.log(vTableRowsCount[j].querySelectorAll('input, select').length+" xxxx")
  				var inputNumb = vTableRowsCount[j].querySelectorAll('input,select');
  				for(k=0;k<inputNumb.length;k++){
  				
  					if(inputNumb[k].type=="select-one"){
  					inputNumb[k].addEventListener("change", function(){
    				highlightEmpty(this);}, false);
  					}
  					if(inputNumb[k].nodeName.toLowerCase()=="input"){
  					inputNumb[k].addEventListener("blur", function(){
    highlightEmpty(this);}, false);
  					}
  				}//for
  
  
  			}//for
  			console.log(y[i].elements.length);
  		}//for
  
  
  console.log('required found');
  }else{
  console.log('required NOT found');
}


function highlightEmpty(elem){

var thisRow = elem.parentElement.parentElement;
  var inputNumb = thisRow.querySelectorAll('input,select');
  for(k=0;k<inputNumb.length;k++){
  inputNumb[k].removeAttribute('style');
  		if(inputNumb[k].value == "" ){
        
  			inputNumb[k].style.borderColor="red";
  			}
  	}
}

</script>

</body>
</html>

Is this similar to what you are trying to achieve?

Html is text based, the vulnerability would be if you showed the server language code that produces the end result of text based html that is only what we want to see! I don't see the problem OF GIVING the link, It will be exposed anyway to everyone. Soon as it goes live bots will identify that it is WordPress, and your address will be passed on, and the attempting hacking to yoursite.com/wp-admin (that is the default location to access wordpress backend dashboard) will begin, unless properly secured. Suggest you use defender plugin to help you with that!

This is useless information without a concept of the html menu/submenu structure, itself!

Also, if you want a reason why you suddenly had  'endless phishing attacks', look no further than WordPress itself! Its the most targeted cms for such attacks.

Listen to own advice, Next time! try providing example relevant code OR link, NEVER I did this, why this happens, it worked with that, how to fix, never ever  images.