Develop Reference

how to align this page contnet without horizontal scroll bar?

Hi I am creating simple website using CSS flexbox, but from some reasons my layout in About.vue stretch out with this horizontal bar only this component is in mainLayout.vue, and I can't figure out what is wrong making this problem. Did someone know how to fix it?
MainLayout.vue
<template>
<div class="wrapper--main">
<Navbar />
<Hero />
<main>
<slot />
</main>
<Footer />
</div>
</template>
<script lang="ts">
import Hero from "../components/Hero.vue";
import Footer from "../components/Footer.vue";
import Navbar from "../components/Navbar.vue";
import { defineComponent } from "vue";
export default defineComponent({
components: { Navbar, Footer, Hero },
});
</script>
<style lang="sass">
#import "../styles/mainLayout.sass"
#import "../styles/variables.sass"
#import "../styles/utilitys.sass"
</style>
MainLayout.sass
#import url('https://fonts.googleapis.com/css2?family=Lato:wght#400;700&display=swap')
*,
*::before,
*::after
box-sizing: border-box
margin: 0px
padding: 0px
img,
picture,
svg
max-width: 100%
display: block
object-fit: cover
img
object-fit: cover
#media (min-width: 768px)
html
font-size: 130%
body
font-family: 'Lato', sans-serif
font-weight: 400
line-height: 1.65
max-width: 2000px
background-color: hsl(var(--white))
color: hsl(var(--text))
.wrapper--main
display: grid
grid-template-rows: auto 1fr auto
min-height: 100vh
main
display: grid
gap: var(--size-fluid-6)
margin-bottom: var(--size-fluid-5)
margin-top: var(--size-fluid-5)
Index.vue
<template>
<MainLayout><About /> </MainLayout>
</template>
<script lang="ts">
import MainLayout from "../layouts/MainLayout.vue";
import About from "../components/About.vue";
import { defineComponent } from "vue";
export default defineComponent({
components: { MainLayout, About },
});
</script>
<style lang="sass">
</style>
About.vue
<template>
<div class="about-container">
<div class="wrapper gap">
<div class="title-container--about gap--sm">
<div class="title-wrapper">
<h2 class="h2">lorem ipsum</h2>
<p class="title-container--sm">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolor
iusto impedit molestiae quo, labore perspiciatis quia, deserunt quis
nobis asperiores, delectus ut! Quaerat ut molestiae sunt ex
molestias fuga quis. orem ipsum dolor sit amet consectetur,
adipisicing elit. Dolor iusto impedit molestiae quo, labore
perspiciatis quia, deserunt quis nobis asperiores, delectus ut!
Quaerat ut molestiae sunt ex molestias fuga quis.
</p>
</div>
<div class="arrow--map">
<img class="icon--lg" src="../icons/arrow-map.svg" alt="" />
</div>
<div class="container-about-btn-map">
<img class="icon--lg about-map" src="../icons/map.svg" alt="" />
<button class="btn btn--primary about-btn">lorem ipsum</button>
</div>
</div>
<img class="img-about only-desktop" src="../img/about.jpg" alt="" />
</div>
</div>
</template>
<script lang='ts'>
import { defineComponent } from "vue";
export default defineComponent({});
</script>
<style lang="sass">
.title-container--sm
width: var(--size-fluid-10)
flex-grow: 0
.about-map
margin-right: auto
.about-btn
margin-right: auto
.container-about--btn-map
display: flex
flex-direction: column
justify-content: center
width: 200px
.gap--sm
gap: var(--size-fluid-4)
.title-container--about
display: flex
flex-direction: column
.arrow--map
display: flex
justify-content: center
.gap
gap: var(--size-fluid-8)
.about-container
margin-left: var(--size-fluid-7)
margin-right: var(--size-fluid-7)
#media (max-width: 1440px)
.only-desktop
display: none
</style>

Try adding this:
html, body
...
max-width: 2000px
width: 100vw
overflow-x: hidden
Although the overflow-x should be a last-resort if the method above fails.
An explanation of why it works
Well, the max-width property you put for the body element only says that the width of the body should not exceed a certain value. Your html element also has a width of its own, and by default thats the viewport (screen) width.
So if your body content stretches out in the y axis, your body element will expand to a maximum of the value you set inorder to accomodate that content, which means it will overflow the width of your html element.
Specifying width: 100vw means that the body will be of the same width as the html element and should not exceed that.
The max-width property only comes into play when the screen size is really large — e.g. on desktops — and you want to limit the width of the page content. That's not something that's typically done, because all the page content will be stuck to one side of the screen. I'm sure this is not your desired effect beacause this also means full-width elements like your navbar will not stretch across the entire screen.

Image Slider using HTML and Javascript

So I was trying to create a image slider using the below code snippets, for a static website and was running it on VScodes Live Server and the Javascript didn't seem to apply to the page. pls help And I would like to add to add a simple fade and appear transition to the image slide as well, so pls answer this too ^_^
And pls don't answer with the bootstrap solution I looked it up and its not I m looking for :p
let images = ['camp1.png', 'camp2.png', 'camp3.png'];
let slide = document.getElementById('slider');
const slider = setTimeout(function(){
for( let i=0;i<=images.length;i++){
slide.src = images[i];
if (i == images.length){
i=0;
}
console.log(i);
}
}, 2000);
slide.addEventListener('load',slider);
#import url('https://fonts.googleapis.com/css2?family=Exo+2:wght#100&family=Exo:ital,wght#1,900&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Exo:ital,wght#1,900&display=swap');
.about {
padding: 2rem 0rem;
}
.upper, .lower {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 2rem;
}
.logo {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#logo{
width: 70%;
}
.image {
background-image: url(scene.gif);
background-size: cover;
width: 36rem;
height: 28rem;
display: flex;
align-items: center;
border-radius: 50%;
border: 3px solid #000;
}
.camp {
position: relative;
top: 2.6rem;
left: 7.3rem;
}
#tent {
width: 30%;
}
#fire {
width: 15%;
position: relative;
top: 1rem;
right: 1rem;
}
.info{
width: 23%;
display: flex;
flex-direction: column;
text-align: center;
padding: 0rem 2rem 2rem 2rem;
margin-top: 4.5rem;
border-radius: 10px;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.info:hover{
transform: scale(1.1);
}
.info h1{
font-family: 'Exo', sans-serif;
font-size: 3rem;
font-weight: black 900;
}
.head1{
text-decoration: white;
}
.info p{
font-family: 'Exo 2', sans-serif;
font-size: 1.5rem;
font-weight: bold;
}
.slider{
display: flex;
align-items: center;
padding-top: 3.5rem;
}
.slider img{
width: 36rem;
height: 28rem;
border-radius: 50%;
border: 3px solid #000;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="about.css" />
<title>About Us</title>
</head>
<body>
<div class="about">
<!-- ------------------------------------ -->
<div class="upper">
<div class="logo">
<img src="logo.gif" alt="" id="logo" />
<div class="image">
<div class="camp">
<img src="tent.png" alt="" id="tent" />
<img src="fire.gif" alt="" id="fire" />
</div>
</div>
</div>
<div class="info">
<h1>ABOUT<br>YELPCAMP</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
corrupti dignissimos?
</p>
</div>
</div>
<!-- ------------------------------------ -->
<div class="lower">
<div class="info">
<h1>ABOUT<br>OUR TEAM</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
corrupti dignissimos?
</p>
</div>
<div class="slider">
<img src="camp1.png" alt="" id="slider"/>
</div>
</div>
<!-- ------------------------------------ -->
</div>
</body>
<script src="about.js"></script>
</html>
So I was trying to create a image slider using the below code snippets, for a static website and was running it on VScodes Live Server and the Javascript didn't seem to apply to the page.
pls help
And I would like to add to add a simple fade and appear transition to the image slide as well, so pls answer this too ^_^
And pls don't answer with the bootstrap solution I looked it up and its not I m looking for :p
let images = ['camp1.png', 'camp2.png', 'camp3.png'];
let slide = document.getElementById('slider');
const slider = setTimeout(function(){
for( let i=0;i<=images.lenght;i++){
slide.src = images[i];
if (i == images.lenght){
i=0;
}
console.log(i);
}
}, 2000);
slide.addEventListener('load',slider());
<div class="lower">
<div class="info">
<h1>ABOUT<br>OUR TEAM</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
corrupti dignissimos?
</p>
</div>
<div class="slider">
<img src="camp1.png" alt="" id="slider"/>
</div>
</div>
<!-- ------------------------------------ -->
</div>
</body>
<script src="about.js"></script>

I think you'd better use setInterval than setTimeout for an automatic slider :)
let images = ['https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/PNG_transparency_demonstration_1.png/260px-PNG_transparency_demonstration_1.png', 'https://static4.depositphotos.com/1006994/298/v/950/depositphotos_2983099-stock-illustration-grunge-design.jpg', 'http://duduf.com/duf/wp-content/uploads/2015/08/Ducati_side_shadow.png'];
let slide = document.getElementById('slider');
const slider = () => {
let i = 0;
setInterval(
function() {
i = i < images.length - 1 ? ++i : 0;
slide.src = images[i];
console.log(i);
}, 2000);
}
slide.addEventListener('load', slider());
<div class="lower">
<div class="info">
<h1>ABOUT<br>OUR TEAM</h1>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Neque
nostrum excepturi unde eveniet delectus? Porro esse laudantium hic
ipsam sed inventore, aliquid quidem tempora rem harum quasi quia
corrupti dignissimos?
</p>
</div>
<div class="slidercont">
<img src="" alt="" id="slider" />
</div>
</div>

A background overlay under jQuery UI dialog doesn't cover the images as expected

I'm having a small issue regarding the dark background that is appearing when clicking on the second image with pink background. How can I make it cover the images but not the dialog box?
Because of the customized libary of jQuery UI, I can't use modal: true
How can I make it cover the images but not the dialog box?
$(function() {
$("#dialog").dialog({
//modal: true,
autoOpen: false,
open: function(e) {
$('body').addClass('modal');
},
close: function(e) {
$('body').removeClass('modal');
}
});
$(".images").find("a").eq(1).on('click', function(e) {
e.preventDefault();
/*setTimeout(() => {
window.location.href = $(this).prop("href");
}, 5000);*/
$("#dialog").dialog("open");
});
});
#dialog {
display: none;
}
img {
width: 300px;
height: 250px;
object-fit: cover;
}
.modal {
background-color: black;
opacity: 1;
overflow: auto;
z-index: 1;
}
<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="images">
<a href="https://www.site1.com">
<img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
</a>
<a href="https://www.site2.com">
<img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</a>
</div>
<div id="dialog" title="Lorem ipsum">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>

If you really to want black out out all the div behind your jQuery dialog box then need to wrap your images in a div and do CSS on that instead of using body here then.
Also, we do not need opacity anymore since all the color will be darker. You can either use CSS::after or CSS::before to do that.
For better practice: (in your case) I have wrapped the images div in this div in new div .modal-body to achieve those results.
Live Working Demo:
$(function() {
$(".images").find("a").eq(1).on('click', function(e) {
e.preventDefault();
$("#dialog").dialog({
autoOpen: false,
open: function(e) {
$('body').addClass('modal');
},
close: function(e) {
$('body').removeClass('modal');
}
}).dialog("open");
setTimeout(() => {
//window.location.href = $(this).prop("href");
}, 50000);
});
});
#dialog {
display: none;
}
img {
width: 300px;
height: 250px;
object-fit: cover;
}
.modal {
background-color: pink;
}
.modal:after {
content: '';
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: pink;
}
<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="modal-body">
<div class="images">
<a href="https://www.site1.com">
<img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
</a>
<br>
<a href="https://www.site2.com">
<img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</a>
</div>
<div id="dialog" title="Lorem ipsum">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>
</div>

The web browser prints the HTML content on the page using a tree structure.
So, the body tag is the deeper tag in your page. Because of that, the background black on body can't cover the other elements inside of it.
Just create a div tag between .images and #dialog, called #modal-background for example. Then, when you open or close the modal, shown and hide #modal-background.
The style of can be like that:
#modal-background.modal {
width: 100%;
height: 100%;
opacity: 1;
overflow: auto;
z-index: 1;
background-color: black;
}
```

Use the CSS ::after pseudo-element.
Please remove background-color: black; CSS from .modal. Just add below CSS.
.modal:after {
content: '';
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
The styles and considerations in this technique are pretty much easy, we’ll be styling the :after pseudo-element on the body. You can choose to position the pseudo-element absolutely with respect to the body, or give it a fixed position.
Updated Snippet :-
$(function() {
$("#dialog").dialog({
//modal: true,
autoOpen: false,
open: function(e) {
$('body').addClass('modal');
},
close: function(e) {
$('body').removeClass('modal');
}
});
$(".images").find("a").eq(1).on('click', function(e) {
e.preventDefault();
/*setTimeout(() => {
window.location.href = $(this).prop("href");
}, 5000);*/
$("#dialog").dialog("open");
});
});
#dialog {
display: none;
}
img {
width: 300px;
height: 250px;
object-fit: cover;
}
.modal {
opacity: 1;
overflow: auto;
z-index: 1;
}
.modal:after {
content: '';
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
}
<!-- These scripts include the full jQuery UI -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<div class="images">
<a href="https://www.site1.com">
<img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
</a>
<a href="https://www.site2.com">
<img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
</a>
</div>
<div id="dialog" title="Lorem ipsum">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>

How to make a hover effects like Wikipedia and Facebook

I am trying to make a hovercard effect using SVG and JavaScript such as Wikipedia and Facebook.
but how to fix the top triangle position when hovering on elements.
I need to fix the triangle position and the hovering action like Wikipedia or facebook.
(NOTE: I have some problem in my css and js link. I am a new programmer, I want to learn more), Sorry for that.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Wikipedia Hover Effects</title>
<style>
.content {
font-family: Segoe UI;
border: 1px solid #ddd;
padding: 30px;
box-sizing: border-box;
line-height: 27px;
}
.v-content-modal {
position: absolute;
background: #fff;
box-shadow: 0 3px 20px 0 #ddd;
width: 350px;
border-top: 3px solid #ddd;
display: none;
box-sizing: border-box;
}
.v-content-modal .modal-title {
background: #f5f5f5;
padding: 0 1.25rem;
font-size: .95rem;
letter-spacing: .03rem;
line-height: 38px;
height: 35px;
border-bottom: 1px solid #ddd;
}
.v-content-modal .modal-content {
padding: 1.75rem 1.25rem;
}
.v-content-modal::before {
content: "";
position: absolute;
top: -23px;
left: 30px;
border: 10px solid transparent;
border-color: transparent transparent #ddd transparent;
}
</style>
</head>
<body>
<div class="content">
Lorem ipsum dolor sit amet One
adipisicing elit. Quisquam, modi neque! Cupiditate itaque vitae aliquid
Two,
pariatur qui sequi minima voluptates voluptatibus quae
nemo! Suscipit Three quibusdam
dignissimos vitae, cum cumque voluptates et hic doloribus dicta, <a href="#" data-title="Four"
data-content="I am the Forth one/" id="info">Four</a> quos,
nostrum in.
</div>
<div class="v-content-modal">
<div class="modal-title">
Title
</div>
<div class="modal-content">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, quam.
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function () {
let modal = $(".v-content-modal");
let title = $(".v-content-modal > .modal-title");
let content = $(".v-content-modal > .modal-content");
let btns = document.querySelectorAll("#info");
btns.forEach(btn => {
btn.addEventListener("mousemove", (e) => {
modal.css({
top: 'unset',
right: 'unset',
left: 'unset',
bottom: 'unset'
});
title.html(e.target.getAttribute('data-title'));
content.html(e.target.getAttribute('data-content'));
let pageX, pageY, winWidth, winHeight, elmWidth, elmHeight, width_limit, height_limit = '';
pageX = e.pageX;
pageY = e.pageY;
winWidth = $(window).width();
winHeight = $(window).height();
elmWidth = $(".v-content-modal").width();
elmHeight = $(".v-content-modal").height();
width_limit = winWidth - elmWidth;
height_limit = winHeight - elmHeight;
(pageX > width_limit) ? crossWidth(): normalWidth();
(pageY > height_limit) ? crossHeight(): normalHeight();
function crossWidth() {
modal.css({
right: '5px'
});
}
function normalWidth() {
modal.css({
left: pageX
});
}
function crossHeight() {
modal.css({
bottom: '111px'
});
}
function normalHeight() {
modal.css({
top: e.pageY + 30 + 'px'
});
}
// show when all customization is completed...
modal.show();
});
btn.addEventListener("mouseleave", () => {
modal.hide();
});
});
});
</script>
</body>
</html>
Again,
<div class="content">
Lorem text Mark Info will show here when you hover Dummy text You will show here when you hover on it
</div>
//Define one time only
<div class="modal" style="display: none">
<div class="modal-title"> </div>
<div class="modal-content"> </div>
</div>
when you hover on any <a> it will be show all the info by using the link addr "/wiki/mark" or "/wiki/you"
#we don't need to assign all info every time!

You can use the Bootstrap framework for such an effect. It is very easy!
You connect js and css Bootstrap files, connect the Poper.js (on the same page) and you can just copy the Bootstrap elements to your project and use it as you want.
You can see the element itself at this link. It is called a tooltips.

My navigation disappears when the browser is resized

So, this is a site that i'm currently working on and everything is fine except this:
As i got warned by one of the guys reviewing my current code, my menu/navigation disappears after being open and closed in its media-querie state, and resized back to monitor-width.
Simplified - follow these steps to see the problem:
Open the code snippet (i would suggest CodePen since the result is shown properly in it) and briefly admire my design. Tthat's it, thank you for your help. Just kidding, next step: resize the browser to the mentioned size (width 480px or less) so that you see the hamburger menu icon on top right, open the menu clicking on the icon, close it, and than change the browser back to full screen size! Do you see the navigation bar on the left?!
What am i missing here? I suppose that it should be a few more lines of JavaScript for some after state (just started learning JS so i dont know), but please look into it and teach me about possible solution(s).
And yes i know, it shouldn't affect any of those mobile users that i'm targeting with my media-queries 'cause nobody will resize it like that and barely anyone will see this, BUT...first thing - i want to make it perfect, and second - if there is something i missed or did wrong i want to hear about it and learn how to fix it/make it right.
Here is the CodePen link: https://codepen.io/anon/pen/VxmMrJ
And here is the code snippet:
function myFunction() {
var x = document.getElementById("menu");
if (x.style.display === "block") {
x.style.display = "none";
}
else {
x.style.display = "block";
}
}
#media only screen and (max-width: 480px) {
.networks, .sidenav, .image-row, .foot1, .foot3 {
display: none;
}
body {
display: block;
width: 100%;
height: 100%;
background-color: #e1e1e1;
}
.page-wrap {
display: block;
margin-top: 0px;
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
z-index: 0;
}
.logo {
display: inline-block;
float: left;
width: 75%;
margin-left: 2.5%;
}
.logoImg {
width: 200%;
}
.menuIcon {
display: inline-block;
float: right;
width: 10%;
margin-top: 6%;
margin-right: 5.5%;
border: none;
z-index: 3;
}
.navButton {
display: block;
width: 100%;
background-color: #e1e1e1;
border: none;
z-index: 3;
}
.navButton:focus {
outline: none;
}
#menu {
display: none;
position: relative;
width: 90%;
margin-left: 5%;
margin-right: 5%;
margin-top: 2.5%;
padding-bottom: 2.5%;
z-index: 3;
}
.main {
display: block;
width: 90%;
height: auto;
padding-bottom: 7.5%;
margin-top: 2.5%;
margin-left: 5%;
margin-right: 5%;
z-index: 1;
}
.textbox {
display: block;
width: 95%;
margin-top: 5%;
margin-left: auto;
margin-right: auto;
font-size: 1.25em;
text-align: justify;
}
.myPhoto {
display: block;
width: 50%;
margin-left: auto;
margin-right: auto;
}
.foot2 {
display: block;
width: 100%;
padding-top: 5%;
padding-bottom: 5%;
font-size: 1.25em;
color: #324B64;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet" href="test.css">
<script src="myScript.js"></script>
<title>Luka Novak</title>
</head>
<body>
<div class="page-wrap">
<div class="header">
<div class="logo">
</div>
<div class="networks">
<img src="facebook-symbol.svg" class="socialnet" alt="facebook">
<img src="instagram-symbol.svg" class="socialnet" alt="instagram">
</div>
<div class="menuIcon">
<button onclick="myFunction()" class="navButton">
<img src="https://cdn3.iconfinder.com/data/icons/gray-toolbar/512/menu-512.png"
alt="menu"
class="iconImg">
</button>
</div>
</div>
<div class="sidenav col-5" id="menu">
about us
services
contact
</div>
<div class="main col-18">
<article class="textbox">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
</article>
<div class="image-row">
<div class="image1">
</div>
<div class="image2">
</div>
<div class="image3">
</div>
</div>
</div>
<div class="footer col-24">
<p class="foot1">Some info</p>
<p class="foot2">design by me</p>
<p class="foot3">More info</p>
</div>
</div>
</body>
</html>

It would be better to do this with a CSS class that it only changed in your mobile media query.
https://codepen.io/anon/pen/KRmYVR
CSS
#media only screen and (max-width: 480px) {
.mobileshow {
display: block !important;
}
}
JS
function myFunction() {
var x = document.getElementById("menu");
if(x.classList.contains("mobileshow")) {
x.classList.remove("mobileshow");
}
else {
x.classList.add("mobileshow");
}
}

Those attributes of "element.style" can only be set a value rather than get their value(you can run "console.log(x.style.display)" to prove it). if you must to get styles of an element, try "getComputedStyle"
Usually, I would hide an element by add a class, and show it by remove that class
const el = document.querySelector('.some-element')
function hideElement() {
if (!el.classList.contains('hidden')) {
el.classList.add('hidden')
}
}
function showElement() {
if (el.classList.contains('hidden')) {
el.classList.remove('hidden')
}
}
.hidden {
display: none;
}
/* you can try this, if you don't want that element to really disappear
.hidden {
opacity: 0;
}
*/
<div class="some-element"></div>
PS: My English is poor, hope you could understand it :)