colliding issues with a responsive row html css

See also questions close to this topic

• Php add contents in the page

  i've one question about my page. I want that any user logged in, can add his content in the page (like on ebay you can add your product that you want to sell) but i don't know how i can do it. Could someone help me? Thanks.
• Anchor tag changes the margin of the whole div

  I am making a sort of section with one side being a h1 and anchor and one side being an image. However, I am having troubles moving the anchor tag as its not working at all with margin since it adds margin to the entire div. This does not apply to the h1.

  Output I want is that I'd like the anchor tag to be moveable with margin etc. without moving the entire div and stuff like that.

  .make-account {
    height: 100%;
    width: 100%;
    margin-top: 0.5%;
    background-color: #EBCEBF;
    display: inline-flex;
    flex-flow: row;
    justify-content: space-between;
  }
  
  .make-account h1 {
    margin-top: 5%;
    text-align: center;
    color: #FDF8F5;
  }
  
  .make-account img {
    width: 50%;
    display: inline-flex;
  }
  
  .make-account a {
    color: #FDF8F5;
    background-color: #266150;
    padding: 1% 2% 1% 2%;
    text-align: center;
  }

  <div class="make-account">
    <h1>WE HELP YOU FIND YOUR OWN SPORTBUDDY!</h1>
  
    <a href="#">MAKE AN ACCOUNT</a>
    <img src="/img/fotboll.jpg">
  </div>
• What is in htm file?

  Can someone tell me what is this code? I found it in suspicious html file on my desktop? Of course is much longer but stackoverflow is cut rest.

  var aa=" apps-actiondatawidget-content-element",ba='" class="',ca='" tabindex="0" role="button">',d='">',da='">',ea='"><table cellpadding="0" class="',ja="' of type ",ka="-caption",la="-content",ma="-default",na="-disabled",pa="-dropdown",qa="-inner-box",ra="-outer-box",sa="",ta="",ua="",va='<td class="',wa='<div class="',xa='<span aria-label="',ya='<span class="', za='<td class="',Ba='<h3 class="',Ca="Application",Da="BUTTON",Ea="CSS1Compat",Fa="CSS_APP_TABLE",Ga="CSS_SHORTCUTS_HELP_POPUP_CONTENT_ELEMENT",Ha="CSS_SHORTCUTS_HELP_POPUP_CONTENT_HEADER",Ia="CSS_SHORTCUTS_HELP_POPUP_HEADER_TABLE_ELEMENT",Ja="CSS_SHORTCUTS_HELP_POPUP_TEAROFF_LINK",Ka="Compatible spreadsheet shortcut",La="Component already rendered",n="DIV",Ma="Deferred has already been called",Na="Edge",Oa="HTMLIFrameElement",Pa="IFRAME",Qa="INPUT",Ra="Not available",Sa="Popular keyboard shortcuts", Ta="SCRIPT",Ua="SELECT",Va="SPAN",Wa="Search all shortcuts",Xa="Symbol.iterator",Ya="TEXTAREA",Za="The DOM element for the container cannot be null.",$a="The element passed as a first parameter cannot be null.",ab="The label input element cannot be null.",bb="The menu button DOM element cannot be null.",cb="Unable to set parent component",db="Uneven number of arguments",eb="[goog.net.IframeIo] Unable to send, already active.",fb="about:blank",gb="about:invalid#zClosurez",hb="absolute",ib="action", jb="activedescendant",kb="aftershow",lb="animate",mb="apps-actiondatawidget-key-focused",nb="apps-actiondatawidget-override-info-icon",ob="apps-shortcutshelppopup-content",pb="apps-shortcutshelppopup-content-element",qb="apps-shortcutshelppopup-content-wrapper",sb="apps-shortcutshelppopup-empty-search",tb="apps-shortcutshelppopup-header-element",ub="apps-shortcutshelppopup-help-center-link",vb="apps-shortcutshelppopup-input",wb="apps-shortcutshelppopup-input-button",xb="apps-shortcutshelppopup-pref-component", yb="apps-shortcutshelppopup-reset-search-button",zb="apps-shortcutshelppopup-search-label",Ab="aria-label",Bb="blur",Cb="border-box",Db="button",Eb="cancel",Fb="change",Gb="character",Hb="checkbox",Ib="checked",q="click",Jb="close",Kb="closed",Lb="collapsed",Mb="combobox",Nb="complete",Ob="completeEditRender",Pb="contextmenu",Qb="data-tooltip",Rb="data-tooltip-align",Sb="data-tooltip-class",Tb="data-tooltip-contained",Ub="data-tooltip-offset",Vb="dialog",Xb="div",Yb="enabled",Zb="enter",$b="error", ac="es3",bc="expanded",cc="expander",dc="fixed",ec="focus",fc="focusin",gc="focusout",hc="force-ctrl-key",r="function",ic="goog-button",jc="goog-control",kc="goog-flat-button",lc="goog-flat-menu-button",mc="goog-inline-block",nc="goog-inline-block ",oc="goog-menu",pc="goog-menu-button",qc="goog-menuheader",rc="goog-menuseparator",sc="goog-option-selected",tc="goog-selectionmenubutton-checkbox",uc="goog-submenu",vc="goog-submenu-arrow",wc="goog-submenu-arrow-rtl",xc="gotpointercapture",yc="haspopup", zc="height",Ac="hidden",Bc="hide",Cc="highlight",Dc="horizontal",Ec="innerIframeReady",Fc='javascript:""',Gc="jfk-button",Hc="jfk-button-action",Ic="jfk-button-standard",Jc="jfk-checkbox",Kc="jfk-checkbox-checkmark",Lc="jfk-tooltip-hide",Mc="jot-ui-searchInput",Nc="jot_viewer",Oc="key",Pc="keydown",Qc="keypress",Rc="keyup",Sc="label",Tc="labelledby",Uc="left",Vc="listbox",Wc="load",Xc="menuitemcheckbox",Yc="mousedown",Zc="mousemove",$c="mouseout",ad="mouseover",bd="mouseup",cd="must provide justification", dd="must provide non-empty justification",ed="none",fd="null",gd="null|string|undefined",t="number",hd="object",id="offset",jd="opt_onFulfilled should be a function.",kd="opt_onRejected should be a function. Did you pass opt_context as the second argument instead of the third?",ld="option",md="orientationchange",nd="outerIframeReady",od="owns",pd="position",qd="px",rd="readystatechange",sd="resize",td="role",ud="select",vd="select-multiple",wd="selected",xd="semicolon",yd="separator",zd="shortcut-dialog-category-selected", Ad="shortcut-dialog-user-scroll",Bd="siets-debug-log-output",Cd="sites-chrome-everything",Dd="sites-gears-button",Ed="sites-header-nav-dropdown-menu",Fd="sites-header-nav-dropdown-menuitem",Gd="sites-searchbox-form",u="string",Hd="submit",Id="success",Jd="suggestionsupdate",Kd="synthetic-keydown",Ld="synthetic-keypress",Md="synthetic-keyup",Nd="textarea",Od="timestamp",Pd="title",Qd="toggle-selected-on-fire",Rd="true",Sd="unhighlight",Td="unknown type name",Ud="value",Vd="vertical",Wd="visible",Xd= "zClosurez",v,Yd=function(a){var b=0;return function(){return b<a.length?{done:!1,value:a[b++]}:{done:!0}}},Zd=typeof Object.defineProperties==r?Object.defineProperty:function(a,b,c){if(a==Array.prototype||a==Object.prototype)return a;a[b]=c.value;return a},$d=function(a){a=[hd==typeof globalThis&&globalThis,a,hd==typeof window&&window,hd==typeof self&&self,hd==typeof global&&global];for(var b=0;b<a.length;++b){var c=a[b];if(c&&c.Math==Math)return c}throw Error("Cannot find global object");},ae=$d(this), be=function(a,b){if(b)a:{var c=ae;a=a.split(".");for(var e=0;e<a.length-1;e++){var f=a[e];if(!(f in c))break a;c=c[f]}a=a[a.length-1];e=c[a];b=b(e);b!=e&&null!=b&&Zd(c,a,{configurable:!0,writable:!0,value:b})}}; be("Symbol",function(a){if(a)return a;var b=function(f,g){this.gs=f;Zd(this,"description",{configurable:!0,writable:!0,value:g})};b.prototype.toString=function(){return this.gs};var c=0,e=function(f){if(this instanceof e)throw new TypeError("Symbol is not a constructor");return new b("jscomp_symbol_"+(f||"")+""+c++,f)};return e},"es6",ac); be(Xa,function(a){if(a)return a;a=Symbol(Xa);for(var b="Array Int8Array Uint8Array Uint8ClampedArray Int16Array Uint16Array Int32Array Uint32Array Float32Array Float64Array".split(" "),c=0;c<b.length;c++){var e=ae[b[c]];typeof e===r&&typeof e.prototype[a]!=r&&Zd(e.prototype,a,{configurable:!0,writable:!0,value:function(){return ce(Yd(this))}})}return a},"es6",ac); var ce=function(a){a={next:a};a[Symbol.iterator]=function(){return this};return a},de=function(a){var b="undefined"!=typeof Symbol&&Symbol.iterator&&a[Symbol.iterator];return b?b.call(a):{next:Yd(a)}},ee=typeof Object.create==r?Object.create:function(a){var b=function(){};b.prototype=a;return new b},fe; if(typeof Object.setPrototypeOf==r)fe=Object.setPrototypeOf;else{var ge;a:{var he={a:!0},ie={};try{ie.proto=he;ge=ie.a;break a}catch(a){}ge=!1}fe=ge?function(a,b){a.proto=b;if(a.proto!==b)throw new TypeError(a+" is not extensible");return a}:null} var je=fe,w=function(a,b){a.prototype=ee(b.prototype);a.prototype.constructor=a;if(je)je(a,b);else for(var c in b)if("prototype"!=c)if(Object.defineProperties){var e=Object.getOwnPropertyDescriptor(b,c);e&&Object.defineProperty(a,c,e)}else a[c]=b[c];a.i=b.prototype},ke=function(a,b){a instanceof String&&(a+="");var c=0,e=!1,f={next:function(){if(!e&&c<a.length){var g=c++;return{value:b(g,a[g]),done:!1}}e=!0;return{done:!0,value:void 0}}};f[Symbol.iterator]=function(){return f};return f}; be("Array.prototype.keys",function(a){return a?a:function(){return ke(this,function(b){return b})}},"es6",ac);be("Array.prototype.values",function(a){return a?a:function(){return ke(this,function(b,c){return c})}},"es8",ac);be("Array.prototype.entries",function(a){return a?a:function(){return ke(this,function(b,c){return[b,c]})}},"es6",ac);var le=function(a,b){return Object.prototype.hasOwnProperty.call(a,b)}; be("WeakMap",function(a){function b(){}function c(l){var m=typeof l;return m===hd&&null!==l||m===r}function e(l){if(!le(l,g)){var m=new b;Zd(l,g,{value:m})}}function f(l){var m=Object[l];m&&(Object[l]=function(p){if(p instanceof b)return p;Object.isExtensible(p)&&e(p);return m(p)})}if(function(){if(!a||!Object.seal)return!1;try{var l=Object.seal({}),m=Object.seal({}),p=new a([[l,2],[m,3]]);if(2!=p.get(l)||3!=p.get(m))return!1;p.delete(l);p.set(m,4);return!p.has(l)&&4==p.get(m)}catch(A){return!1}}())return a; var g="$jscomp_hidden"+Math.random();f("freeze");f("preventExtensions");f("seal");var h=0,k=function(l){this.T=(h+=Math.random()+1).toString();if(l){l=de(l);for(var m;!(m=l.next()).done;)m=m.value,this.set(m[0],m[1])}};k.prototype.set=function(l,m){if(!c(l))throw Error("Invalid WeakMap key");e(l);if(!le(l,g))throw Error("WeakMap key fail: "+l);l[g][this.T]=m;return this};k.prototype.get=function(l){return c(l)&&le(l,g)?l[g][this.T]:void 0};k.prototype.has=function(l){return c(l)&&le(l,g)&&le(l[g], this.T)};k.prototype.delete=function(l){return c(l)&&le(l,g)&&le(l[g],this.T)?delete l[g][this.T]:!1};return k},"es6",ac); be("Map",function(a){if(function(){if(!a||typeof a!=r||!a.prototype.entries||typeof
• We have tried pretty much everthing but no matter what when i run ember from vsc (works fine) my page is black

  I have a feeling its something to do with the open editors. so here is a list of those click

  if you have any other ideas. plz tell me anything helps! thanks alot!
• Serving CSS files from Dropbox fails on Safari

  Hi we are using Dropbox for serving CSS files on various webpages. This below code has been working fine for years now, but today we get error-reports that the CSS is not loaded in Safari browser (both Safari for iOS and for PC).

  It works fine in Chrome, IE11, Edge and Firefox and it has been working in Safari earlier.

  <link id="inlinecss" rel="stylesheet" type="text/css" href="https://dl.dropbox.com/foo/bar/baz.css">
  

  I checked my old Safari browser for PC and it gives this error:

  Resource interpreted as Stylesheet but transferred with MIME type text/html.

  Anyone got any idea on how to solve this or why it suddently occours?
• Including Fonts with SCSS and Create React App

  I'm building a simple create-react-app and using SCSS. I downloaded a custom font and I have the .otf, .ttf, and .woff files. I was only planning on using the .otf file, but one way or another, I can't figure out where my relative reference for the file will be. Here is my directory structure:

  app
  |__public
  |__src
     |__css
     |__fonts
     |__img
     |__sass
        |____abstracts
             |__(_fonts.scss)   
  

  In the _fonts.scss file, here is my code:

  @font-face {
      font-family: 'LeagueGothic';
      src: local('LeagueGothic'), url(../../fonts/LeagueGothic-Regular.otf) format('otf');
  }
  

  I'm not getting compilation errors or anything like that but the font isn't being applied. I'm studying webpack right now to see if I can dissect the build process and figure out where my files end up so I know where to reference. I'm sure there is an easier work-around I just can't find the direct answer.
• Is it possible to place cells automatically on the next row while using css grid areas?

  I'm using css grid for a new project and i came across a "problem". I've read the documentation but maybe i'm missing something.

  Current situation

  I've created a css grid with two columns. The left column is the "main" column and the right column is the "side" column. If i put the divs alternately after each other, each cell will be placed to the next row automatically. This works fine:

  .grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 10px;
  }
  
  .grid__cell {
    height: 50px;
  }
  
  .main {
    background: blue;
  }
  
  .side {
    background: red;
  }

  <div class="grid">
    <div class="grid__cell main">
      main
    </div>
    <div class="grid__cell side">
      side
    </div>
    <div class="grid__cell main">
      main
    </div>
    <div class="grid__cell side">
      side
    </div>
    <div class="grid__cell main">
      main
    </div>
    <div class="grid__cell side">
      side
    </div>
    <div class="grid__cell main">
      main
    </div>
    <div class="grid__cell side">
      side
    </div>
  </div>

  Goal

  Now i want to create template-areas for both columns. This way it's easier to put a certain cell in the right column and the order of the divs in the html doesn't matter anymore. The problem is that when i'm using template-areas, all the cells will start at the first row:

  .grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 10px;
    
    grid-template-areas: "main side";
  }
  
  .grid__cell {
    height: 50px;
  }
  
  .main {
    grid-area: main;
    
    background: blue;
  }
  
  .side {
    grid-area: side;
    
    background: red;
  }

  <div class="grid">
    <div class="grid__cell main">
      main
    </div>
    <div class="grid__cell side">
      side
    </div>
    <div class="grid__cell main">
      main
    </div>
    <div class="grid__cell side">
      side
    </div>
    <div class="grid__cell main">
      main
    </div>
    <div class="grid__cell side">
      side
    </div>
    <div class="grid__cell main">
      main
    </div>
    <div class="grid__cell side">
      side
    </div>
  </div>

  I know i can use grid-row to place the cell to a specific row, but that's not the ideal situation. It would be nice if the cells will be placed automatically to the next row in the right column. Am i missing something or is this not possible?
• Select parent whithout his child with :not and scss

  I have a table#data_table that I would want to style but I dont want the css to apply to its child table.table-condensed which is also a child of div.vue-daterange-picker as you can see on the html tree I tried this but it seems that :not does'nt work with nested css :

  :not(.vue-daterange-picker) table
  {
      tr {...}
      td {...}
      ...
  }