javascript - Responsive design for CSS grids -


i trying place 2 divs occupying 1:2 ratio inside container div. when on wider screen 768px or landscape mode on smartphones, side side. on narrower screen portrait mode on smartphones, stacked n top of another. how accomplish media queries? here's have tried(note: divs needs created js):

let colors = ['#1f82d2', "#f86a25", "#1697d5"];  let keys = [],  l = colors.length;    for(let = 0; < l; i++) {    keys.push(`title${i}`)  }    let main = document.queryselector('main');  (let = 1; <= l; i++) {      const attributes = {style: `background: ${colors[i-1]}`}          , colon = elementfactory('span', {attributes: {style: `color: ${colors[i-1]}`}, text: ":"})          , h2 = elementfactory('h2', {text: keys[i-1]}, colon)          , div_header = elementfactory('div', {class: 'topic_head',}, h2)          , div_content = elementfactory('div', {class: 'topic_content', attributes})          , div = elementfactory(`div`, { class: 'topic', id: `items${i}`}, div_header, div_content);      main.appendchild(div);    }    function elementfactory(el, options = {}, ...children) {      el = document.createelement(el);      if (options.id) el.id = options.id;      if (options.class) el.classlist.add(options.class);      if (options.text) el.innertext = options.text;      if (options.html) el.innerhtml = options.html;      if (options.attributes) object.entries(options.attributes).map(([k, v]) => el.setattribute(k, v));      children.foreach(child => {          if (typeof child === 'string') {              el.appendchild(document.createtextnode(child))          } else {              el.appendchild(child)          }      });        return el  }
.topic {      display: grid;      height: 100vh;      font-size: 3.3rem;      grid-template-columns: 1fr 2fr;  }    @media screen , (max-device-width : 719px) {     .topic {          display: grid;          height: 100%;          font-size: 3.3rem;          grid-template-rows: 1fr 3fr;      }   }  .topic_head {      justify-content: center;      display: flex;      font-style: italic;      font-weight: bold;      font-family: "playfair display";      font-size: 7rem;      align-items: center;  }    .topic_content {      font-family: "overlock";      display: flex;      align-items: center;      line-height: 1.2;      color: white;        }    body {    font-size: 10vh;  }
<main></main>

@media screen , (max-width : 768px) { /*when screen width equal or smaller 768px*/ .topic {   display: list-item; /* display list item*/   height: auto; /* height adjust automatically new content.*/ }  .topic_head {   width: 100%; /*adjust need*/   height: 100vh; /*adjust need*/ }  .topic_content {   width: 100%; /*adjust need*/   height: 100vh; /*adjust need*/ }  } 

let colors = ['#1f82d2', "#f86a25", "#1697d5"];  let keys = [],  l = colors.length;    for(let = 0; < l; i++) {    keys.push(`title${i}`)  }    let main = document.queryselector('main');  (let = 1; <= l; i++) {      const attributes = {style: `background: ${colors[i-1]}`}          , colon = elementfactory('span', {attributes: {style: `color: ${colors[i-1]}`}, text: ":"})          , h2 = elementfactory('h2', {text: keys[i-1]}, colon)          , div_header = elementfactory('div', {class: 'topic_head',}, h2)          , div_content = elementfactory('div', {class: 'topic_content', attributes})          , div = elementfactory(`div`, { class: 'topic', id: `items${i}`}, div_header, div_content);      main.appendchild(div);    }    function elementfactory(el, options = {}, ...children) {      el = document.createelement(el);      if (options.id) el.id = options.id;      if (options.class) el.classlist.add(options.class);      if (options.text) el.innertext = options.text;      if (options.html) el.innerhtml = options.html;      if (options.attributes) object.entries(options.attributes).map(([k, v]) => el.setattribute(k, v));      children.foreach(child => {          if (typeof child === 'string') {              el.appendchild(document.createtextnode(child))          } else {              el.appendchild(child)          }      });        return el  }
.topic {      display: grid;      height: auto;      font-size: 3.3rem;      grid-template-columns: 1fr 2fr;  }    @media screen , (max-width : 768px) {  .topic {      display: list-item;      height: auto;  }       .topic_head {     width: 100%;  }    .topic_content {     width: 100%;     height: 100vh;  }        }  .topic_head {      justify-content: center;      display: flex;      font-style: italic;      font-weight: bold;      font-family: "playfair display";      font-size: 7rem;      align-items: center;  }    .topic_content {      font-family: "overlock";      display: flex;      align-items: center;      line-height: 1.2;      color: white;        }    body {    font-size: 10vh;  }
<main></main>


Comments

Post a Comment

Popular posts from this blog

ubuntu - PHP script to find files of certain extensions in a directory, returns populated array when run in browser, but empty array when run from terminal -

i running os ububtu 16.04. ultimate goal able run php script cron job every minute. here php script located @ /var/www/html/tests/test/index.php : <?php $directorypath = $_server['document_root']."/tests/test/data/"; echo "directorypath: $directorypath<br><br>";//check $imagefilepathsarray = glob($directorypath . "*.{png,gif}", glob_brace); echo "<br><br>imagefilepathsarray: "; print_r($imagefilepathsarray);//check ?> when open php script in browser visiting url my-ip-address/tests/test/index.php , get: directorypath: /var/www/html/tests/test/data/ imagefilepathsarray:array( [0] => /var/www/html/tests/test/data/pic.png [1] => /var/www/html/tests/test/data/pic.gif ) before writing cron job in crontab file, need check if can run anywhere using terminal . opened ubuntu terminal @ /home/ location, , executed in terminal: sudo php /var/www/html/tests/test/index.php i got following out...
Read more

php - How can i create a user dashboard -

today have questions you, want create user dashboard site, include (obviously), users data, example -email -username -and others stuff how can information, , print them in html page? if can, how can these information via php sessions? shuld use session? example, if user login, , start new session ( session_start() ), how can data print in dashboard? should use php "project"? in advice, have day , thank time!
Read more

javascript - How to detect toggling of the fullscreen-toolbar in jQuery Mobile? -

i have jquery mobile page fixed full-screen toolbar, data-tap-toggle enabled. straight under toolbar have positioned banner should slide upwards when toolbar hiding , slide downward when toolbar showing. jquery mobile toggles toolbar applying , removing ui-fixed-hidden class - sadly, can't find in documentation of toolbar widget toggle , hide or show event that. how can detect when toolbar toggled, reposition banner? .banner { position: fixed; background-color: darkseagreen; top: 46px; min-height: 48px; width: 100%; text-align: center; line-height: 48px; } <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> <script src="https://code.jquery.com/jquery-1....
Read more