We Keep Coding

Scroll block with narrowing of another

Tell me how this functionality is implemented, we scroll the block (red in the screenshot) and start reducing the left button filters (green in the screenshot), in which way should I go? Maybe you have examples with code?
.wrapper {
display: flex;
height: 3rem;
width: 220px;
}
button {
display: flex;
align-items: center;
}
.tags {
overflow-x: scroll;
display: flex;
gap: 10px;
}
.tag {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 700;
padding: 0 10px;
background: grey;
color: white;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<div class="wrapper">
<button>
<span class="material-icons orange600">face</span>
Filter
</button>
<div class="tags">
<div class="tag">one</div>
<div class="tag">two</div>
<div class="tag">three</div>
<div class="tag">four</div>
</div>
</div>
EDIT 1: Video example https://www.veed.io/view/6599056d-4f98-4995-8a7a-d052c86812d3

HTML drop-down menu with icons and text

I have taken over the code from this post. As I have explained there, I have basically no HTML knowledge, yet I have this HTML part of my project that I have to finish.
So, the code creates a bar with a drop-down menu, but I want to extend it to have an icon next to the names. I have looked at these examples but I can't figure out how to combine them. Is there someone who could help?
const projectsTab = document.getElementById('projects')
const tabName = projectsTab.querySelector('.tab-name')
const projectLinks = document.querySelector('.project-links')
projectsTab.addEventListener('click', e => {
const isOpen = projectLinks.classList.contains('open')
if (isOpen) projectLinks.classList.remove('open')
else projectLinks.classList.add('open')
})
// link event listeners
const links = [...projectLinks.children] // turn this into an array
links.forEach(link => link.addEventListener('click', e => {
tabName.innerText = link.innerText
}))
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background: #222;
top: 0;
left: 0;
color: white;
display: flex;
}
nav>* {
flex: 1;
}
#logo {
padding-left: 20px;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 2px;
display: flex;
justify-content: flex-start;
align-items: center;
}
nav ul {
display: flex;
list-style: none;
height: 100%;
}
nav ul li {
position: relative;
flex: 1;
background: #222;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.2s;
}
nav ul li:hover {
background: #555;
}
.project-links {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
left: 0;
top: 100%;
width: 100%;
background-color: white;
color: black;
/* This is the height of this div + height of the nav bar */
transform: translateY(-135%);
transition: 0.2s;
z-index: -1;
}
.project-links.open {
transform: translateY(0);
}
.project-link {
height: 50px;
display: flex;
align-items: center;
padding-left: 20px;
text-decoration: none;
color: white;
cursor: pointer;
transition: 0.2s;
background: #222;
color: white;
}
.project-link:hover {
background: #555;
}
<nav>
<div id="logo">Logo</div>
<ul>
<li>About</li>
<li id="projects">
<span class="tab-name">Projects</span>
<div class="project-links">
<a class="project-link" href="#">Link 1</a>
<a class="project-link" href="#">Link 2</a>
<a class="project-link" href="#">Link 3</a>
</div>
</li>
<li>Contact</li>
</ul>
</nav>

Assuming you want to use Font Awesome icons, just add the proper i tag referencing the right icon beside the text in the corresponding a tags.
const projectsTab = document.getElementById('projects')
const tabName = projectsTab.querySelector('.tab-name')
const projectLinks = document.querySelector('.project-links')
projectsTab.addEventListener('click', e => {
const isOpen = projectLinks.classList.contains('open')
if (isOpen) projectLinks.classList.remove('open')
else projectLinks.classList.add('open')
})
// link event listeners
const links = [...projectLinks.children] // turn this into an array
links.forEach(link => link.addEventListener('click', e => {
tabName.innerText = link.innerText
}))
document.addEventListener("click", e => {
if(!projectsTab.contains(e.target)){
projectLinks.classList.remove("open");
}
})
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background: #222;
top: 0;
left: 0;
color: white;
display: flex;
}
nav>* {
flex: 1;
}
#logo {
padding-left: 20px;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 2px;
display: flex;
justify-content: flex-start;
align-items: center;
}
nav ul {
display: flex;
list-style: none;
height: 100%;
}
nav ul li {
position: relative;
flex: 1;
background: #222;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.2s;
}
nav ul li:hover {
background: #555;
}
.project-links {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
left: 0;
top: 100%;
width: 100%;
background-color: white;
color: black;
/* This is the height of this div + height of the nav bar */
transform: translateY(-135%);
transition: 0.2s;
z-index: -1;
}
.project-links.open {
transform: translateY(0);
}
.project-link {
height: 50px;
display: flex;
align-items: center;
padding-left: 20px;
text-decoration: none;
color: white;
cursor: pointer;
transition: 0.2s;
background: #222;
color: white;
}
.project-link:hover {
background: #555;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<nav>
<div id="logo">Logo</div>
<ul>
<li>About</li>
<li id="projects">
<span class="tab-name">Projects</span>
<div class="project-links">
<a class="project-link" href="#"><i class="fa fa-envelope"></i> Link 1</a>
<a class="project-link" href="#"><i class="fa fa-envelope"></i> Link 2</a>
<a class="project-link" href="#"><i class="fa fa-envelope"></i> Link 3</a>
</div>
</li>
<li>Contact</li>
</ul>
</nav>
To close the dropdown when the user clicks elsewhere, add an event listener for click and check whether the target is a subchild of projectsTab.

Since your dropdown menu elements are already flex containers, you can simply add an image at the beginning of each of them, give them a class (icon) and change a bit the padding. Here I put icon { padding: 3px; } and I removed the 20px padding at the beginning of menu elements, because it squished the images against the text.
I also added some JavaScript to close the menu when you click elsewhere.
const projectsTab = document.getElementById('projects')
const tabName = projectsTab.querySelector('.tab-name')
const projectLinks = document.querySelector('.project-links')
projectsTab.addEventListener('click', e => {
const isOpen = projectLinks.classList.contains('open')
if (isOpen) projectLinks.classList.remove('open')
else projectLinks.classList.add('open')
})
addEventListener('click', e => {
var target = e.target;
if (!(target.classList.contains('project-link') || target.classList.contains('project-link') || target.classList.contains('tab-name') || target.id == "projects")) {
projectLinks.classList.remove('open');
} else {
e.stopPropagation();
}
});
// link event listeners
const links = [...projectLinks.children] // turn this into an array
links.forEach(link => link.addEventListener('click', e => {
tabName.innerText = link.innerText
}))
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Segoe UI', sans-serif;
}
nav {
position: fixed;
width: 100%;
height: 50px;
background: #222;
top: 0;
left: 0;
color: white;
display: flex;
}
nav>* {
flex: 1;
}
#logo {
padding-left: 20px;
font-size: 30px;
text-transform: uppercase;
letter-spacing: 2px;
display: flex;
justify-content: flex-start;
align-items: center;
}
nav ul {
display: flex;
list-style: none;
height: 100%;
}
nav ul li {
position: relative;
flex: 1;
background: #222;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 0.2s;
}
nav ul li:hover {
background: #555;
}
.project-links {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
left: 0;
top: 100%;
width: 100%;
background-color: white;
color: black;
/* This is the height of this div + height of the nav bar */
transform: translateY(-135%);
transition: 0.2s;
z-index: -1;
}
.project-links.open {
transform: translateY(0);
}
.project-link {
height: 50px;
display: flex;
align-items: center;
padding-left: 5px;
text-decoration: none;
color: white;
cursor: pointer;
transition: 0.2s;
background: #222;
color: white;
}
.project-link:hover {
background: #555;
}
.icon {
padding-right: 3px;
}
<nav>
<div id="logo">Logo</div>
<ul>
<li>About</li>
<li id="projects">
<span class="tab-name">Projects</span>
<div class="project-links">
<a class="project-link" href="#"><img class="icon" src="http://lorempixel.com/20/20/cats/">Link 1</a>
<a class="project-link" href="#"><img class="icon" src="http://lorempixel.com/20/20/cats/">Link 2</a>
<a class="project-link" href="#"><img class="icon" src="http://lorempixel.com/20/20/cats/">Link 3</a>
</div>
</li>
<li>Contact</li>
</ul>
</nav>

This is actually pretty easy just like the example you linked to first add the link to the icon library inside the <head></head> tag of your html:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
then add the <i/> tag inside the <a></a> tag of your drop down. Your html code should look like so
<nav>
<div id="logo">Logo</div>
<ul>
<li>About</li>
<li id="projects">
<span class="tab-name">Projects</span>
<div class="project-links">
<a class="project-link" href="#"><i class="fa fa-home"/>Link 1</a>
<a class="project-link" href="#"><i class="fa fa-search"/>Link 2</a>
<a class="project-link" href="#"><i class="fa fa-globe"/>Link 3</a>
</div>
</li>
<li>Contact</li>
</ul>
</nav>

Django Burger Menu with JavaScript Static

I am writing a Django website. I am trying to use a JavaScript file to move a mobile nav bar into the page when clicking on the burger icon.
I have successfully loaded a JavaScript file from the static folder. (I checked with the alert function.)
However, once I write more code in the JavaScript file, the JavaScript file doesn't work and I don't get the alert "Hello, javascript file loaded" upon refreshing the website page. Is my javascript incorrect? Is the format incorrect for use in Django?
Any help would be much appreciated, thanks for reading.
App.js
alert("Hello, javascript file loaded");
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
burger.addEventListener('click', () = > {
nav.classList.toggle('nav-active');
});
}
navSlide();
Base.html
{% load static %}
<html>
<head>
<title>Pep Genie</title>
<link rel="stylesheet" type="text/css" href="{% static 'genie/style.css' %}">
</head>
<body>
{% block content %}{% endblock %}
<script src="{% static 'genie/app.js' type="text/javascript" %}"></script>
</body>
</html>
Index.html
{% extends 'genie/base.html' %}
{% block content %}
<nav>
<div class="logo">
<h4>The Logo</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Our Projects
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
Style.css
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: navy;
color: lightgray;
font-family: Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
nav .logo {
margin: 0 100px 0 0;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
nav li {
list-style: none;
}
nav a {
text-decoration: none;
color: lightgray;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 2px;
margin: 4px;
background-color: lightgray;
}
#media screen and (max-width: 1000px) {
.nav-links {
width: 50%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0;
top: 8vh;
height: 92vh;
background-color: navy;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-active {
transform: translateX(0%);
}

function navSlide(){
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
burger.addEventListener('click', function(){
nav.classList.toggle('nav-active');
console.log('event triggered');
});
}
navSlide();
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: navy;
color: lightgray;
font-family: Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
.burger {
display: none;
}
nav .logo {
margin: 0 100px 0 0;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
nav li {
list-style: none;
}
nav a {
text-decoration: none;
color: lightgray;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger div {
width: 25px;
height: 2px;
margin: 4px;
background-color: lightgray;
}
#media screen and (max-width: 1000px) {
.nav-links {
width: 50%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0;
top: 8vh;
height: 92vh;
background-color: navy;
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.burger {
display: block;
cursor: pointer;
background: red;
}
}
.nav-active {
transform: translateX(0%);
}
<html>
<head>
<title>Pep Genie</title>
</head>
<body>
<nav>
<div class="logo">
<h4>The Logo</h4>
</div>
<ul class="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Our Projects
</li>
</ul>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</body>
</html>
I don't know about django and your js style is strange but the classic way tha works would look like this:
function navSlide(){
const burger = document.querySelector('.burger');
const nav = document.querySelector('.nav-links');
burger.addEventListener('click', function(){
nav.classList.toggle('nav-active');
});
}
Please check this example, in the console you can see the triggered event on click burger-menu: https://jsfiddle.net/yf9wo67a/

It looks like there might be a problem with this line:
<script src="{% static 'genie/app.js' type="text/javascript" %}"></script>
The type="" section should be separate form the src, as follows:
<script src="{% static 'genie/app.js' %}" type="text/javascript"></script>

Pure CSS Burger Menu in Django
Found a work around by by using a pure CSS responsive nav bar with the :target pseudo class.
Here's my sources:
Mark Caron: Pure CSS Hamburger Menu. https://medium.com/#heyoka/responsive-pure-css-off-canvas-hamburger-menu-aebc8d11d793
Mozilla MDN Web Docs: the CSS :target peudo-class. https://developer.mozilla.org/en-US/docs/Web/CSS/:target
Instead of using the JavaScript function with onclick, you can set your burger icon inside an anchor tag, and set the href to and url fraction like "#mobile-menu". Then, to make the url fraction cause a change (like changing your menu display from none to block for example) you can use the CSS :target pseudo class. Add this to your CSS.
.mobile-menu:target{
display: flex;
}
This references an id, so it is essential that your menu has an id set to "mobile-menu". This can now make the menu appear on clicking the burger.
Here is my full code for reference:
index.html
{% extends 'genie/base.html' %}
{% block content %}
<nav>
<div class="logo">
<h4>The Logo</h4>
</div>
<ul class="nav-links" id="nav-links">
<li>
Home
</li>
<li>
About
</li>
<li>
Work
</li>
<li>
Our Projects
</li>
</ul>
<a class="burger" href="#nav-links">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</a>
</nav>
{% endblock %}
base.html
{% load static %}
<html>
<head>
<title>Pep Genie</title>
<link rel="stylesheet" type="text/css" href="{% static 'genie/style.css' %}">
<link rel="javascript" type="text/javascript" href="{% static 'genie/app.js' %}">
</head>
<body>
{% block content %}{% endblock %}
<script src="{% static 'genie/app.js' %}" type="text/javascript"></script>
</body>
</html>
style.css
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
nav {
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: navy;
color: lightgray;
font-family: Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 5px;
font-size: 20px;
}
nav .logo {
margin: 0 100px 0 0;
}
.nav-links {
display: flex;
justify-content: space-around;
width: 40%;
}
nav li {
list-style: none;
}
nav a {
text-decoration: none;
color: lightgray;
letter-spacing: 3px;
font-weight: bold;
font-size: 14px;
}
.burger {
display: none;
}
.burger div {
width: 25px;
height: 2px;
margin: 4px;
background-color: lightgray;
}
#media screen and (max-width: 1000px) {
.nav-links {
width: 50%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.nav-links {
position: absolute;
right: 0;
top: 8vh;
height: 92vh;
background-color: navy;
display: none;
flex-direction: column;
align-items: center;
width: 50%;
}
.burger {
display: block;
cursor: pointer;
}
}
.nav-links:target{
display: flex;
}

Navbar items disappear after clicking the hamburger icon and then resizing the browser

I appreciate all the help I can get :)
I'm trying to create a responsive navbar, which is editable for later usage.
But it seems like I have an issue with the hamburger icon. If I resize the web browser the content gets switched for the mobile friendly hamburger icon and the menu appears, and vice versa.
But when I click the hamburger icon in the mobile view and then click it again to make the menu disappear and after this resizing it to desktop view the menu goes missing.
How can I make it work?
HTML:
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Framework</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$(".navbar-hamburger").click(function(){
$(".navbar-item").toggle();
});
});
</script>
</head>
<body class="bg-grey-light">
<nav class="navbar bg-white">
<div class="navbar-brand">Company Name</div>
<div class="navbar-item">
Home
</div>
<div class="navbar-item">
About
</div>
<div class="navbar-item">
Shop
</div>
<div class="navbar-item">
Forum
</div>
<div class="navbar-hamburger">
<i class="fa fa-chevron-down"></i>
</div>
</nav>
</body>
CSS:
.navbar{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.navbar-brand{
flex-grow: 100;
padding: 0.75rem;
padding-left: 1.5rem;
}
.navbar-item{
flex-grow: 0;
padding: 0.75rem;
display: block;
}
.navbar-item:hover {
background-color: var(--color-grey-lighter);
}
.navbar-hamburger{
display: none;
position: absolute;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
right: 0;
}
.navbar-hamburger-active{
display: none;
position: absolute;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
right: 0;
}
#media only screen and (max-width: 720px) {
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-brand{
width: 100%;
}
.navbar-item{
width: 100%;
padding-left: 1.5rem;
display: none;
}
.navbar-hamburger{
display: block;
}
}
Brief DEMO:
https://codepen.io/zalandemeter12/pen/dQayMP
Regards

You can use toggleClass instead and hide navbar-item only on little screens
#import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
.navbar{
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
position: relative;
}
.navbar-brand{
flex-grow: 100;
padding: 0.75rem;
padding-left: 1.5rem;
}
.navbar-item{
flex-grow: 0;
padding: 0.75rem;
display: block;
}
.navbar-item:hover {
background-color: var(--color-grey-lighter);
}
.navbar-hamburger{
display: none;
position: absolute;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
right: 0;
}
.navbar-hamburger-active{
display: none;
position: absolute;
padding: 0.75rem 1.5rem 0.75rem 1.5rem;
right: 0;
}
#media only screen and (max-width: 720px) {
.navbar{
flex-direction: column;
align-items: flex-start;
}
.navbar-brand{
width: 100%;
}
.navbar-item{
width: 100%;
padding-left: 1.5rem;
display: none;
}
.navbar-hamburger{
display: block;
}
#media only screen and (max-width: 768px) {
.navbar-item{
display:none;
}
.navbar-item.opened{
display:block;
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).ready(function(){
$(".navbar-hamburger").click(function(){
$(".navbar-item").toggleClass('opened');
});
});
</script>
<nav class="navbar bg-wihite">
<div class="navbar-brand">Company Name</div>
<div class="navbar-item">
Home
</div>
<div class="navbar-item">
About
</div>
<div class="navbar-item">
Shop
</div>
<div class="navbar-item">
Forum
</div>
<div class="navbar-hamburger">
<i class="fa fa-chevron-down"></i>
</div>
</nav>

How can I make these divs move under each other with page responsiveness?

I have a row of divs with images within them that looks like this:
And when I change the page size, essentially what it will look like on mobile devices the divs begin to fall below each other like this:
Which is amazing because it's exactly what I want. But I have another row of divs that look like this:
But when I change the page size, this set of divs don't fall under each other like the other divs. They're just cut off by the page so essentially these divs are not mobile responsive. Can anybody help me with have to get these second set of divs responsive like the first set?
Thank you in advance!
HTML:
<div class="row-fluid" id="extras">
<div class="container-fluid">
<div class="row-fluid flex">
<div class="block text-center">
<img src="http://mysite/wp-content/uploads/2016/05/socialmed.png" width="155" height="auto" max-width="100%"/>
</div>
<div class="block text-center">
<ul class="aboutli">
<li><a target="_blank" href="http://mysite/information">About Us</a></li>
<li><a target="_blank" href="http://mysite/information">FAQ's</a></li>
<li><a target="_blank" href="http://mysite/information">Contact Us</a></li>
<li><a target="_blank" href="http://mysite/information">Work With Us</a></li>
<li><a target="_blank" href="http://mysite/information">Terms and Conditions</a></li>
<li><a target="_blank" href="http://mysite/information">Privacy Policy<br></a></li>
<li><a target="_blank" img src="http://mysite/wp-content/uploads/2016/04/DrinkawareRed.png" href="https://www.drinkaware.co.uk/"><div id="drinkaware"></div></a></li>
</ul>
</div>
<div class="block text-center">
<div id="words">
<p class="become">become a driver</p>
<p class="driver-para">As an ever evolving new start up we'll constantly be looking for friendly drivers to join the team, so If you'd be interested in join our team click the button below to see the available opportunities we have available.</p>
<input type="submit" id="driver-btn" value="FIND OUT MORE" onclick="location='http://mysite/join-the-team/'"/>
</div>
</div>
<div class="block text-center">
<img src="http://mysite/wp-content/uploads/2016/07/testimg.png" width="200" height="auto"/>
</div>
</div>
</div>
</div>
CSS:
#extras {
height: auto;
width: 100%;
overflow: hidden;
background-color: #fff;
}
div.block {
padding: 10px 50px 10px 50px;
display: inline-flex;
justify-content: center;
flex-direction: column;
}
.flex {
display: flex;
}
#words {
width: 300px;
height: auto;
}
#linksdrinks {
margin-top: 70px;
margin-right: 70px;
width: 160px;
height: 238px;
display: inline-block;
vertical-align: top;
}
ul.aboutli {
color: #000000;
font-size: 13px;
margin: 0;
text-decoration: none;
list-style-type: none !important;
line-height: 0.8cm;
}
#drinkaware {
width: 156px;
height: 50px;
display:list-item;
background-image: url('http://mysite/wp-content/uploads/2016/04/DrinkawareRed.png');
background-size: 150px auto;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
vertical-align: top;
list-style-type: none !important;
}
#driver {
margin-left: 70px;
margin-right: 70px;
padding: 5px;
width: 300px;
height: auto;
display: inline-block;
}
.become {
color: #a6a6a6;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
}
.driver-para {
font-size: 13px;
}
#driver-btn {
color: #fd0e35;
font-size: 11px;
font-weight: bold;
text-shadow: none;
padding: 7px;
background-color: #fff;
border: 2px solid #fd0e35;
box-shadow: none;
border-radius: 4px;
outline: none;
}
#driver-btn:hover {
color: #fff;
background-color: #fd0e35;
}
#open24 {
display: inline-block;
width: 200px;
height: auto;
background-image: url('http://mysite/wp-content/uploads/2016/04/open247.png');
background-size: 250px auto;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
}

You can try this
#media screen and (max-width:767px){
.flex {
display: block;
}
}

Try with this code. Write your below css in media query
#media (min-width:767px) {
div.block {
padding: 10px 50px 10px 50px;
display: inline-flex;
justify-content: center;
flex-direction: column;
}
.flex {
display: flex;
}
}

Also for cross browser support display: inline-flex; is now display: flex;
be sure to use
http://autoprefixer.github.io/

You can try below code.
.flex {
display: flex;
flex-wrap: wrap;
justify-content: center;
}