I wanted to know if there is anything related to media queries i'm not aware of that is making my web projects look different on the dev tools and on a mobile device.
To be clear, I made a webpage and started adding media queries to make it responsive. I used chrome dev-tools to choose the iphone se as target and started re arranging each element till it looked as I expected. something like this :
enter image description here
but when I open the webpage on the actual phone it looks something like this :
enter image description here
here is the css:
#media screen and (max-width: 330px ){ /*for iphone 5/se */
#burter{
top: 19vh;
left: 24vw;
font-size: 9vw;}
#logo{
width: 23vw;
top: 17vh;
left: 0vw;}
#navtabs{
top: 30vh;
left: 2vw;
flex-direction: row;
height: 14vw;
width: 88vw;}
.divisor{
width: 8%;}
.tab{
font-size: 4vw;}
#imgside{
display: none;}
#sponsors{
width: 88vw;
height: 15vw;
top: 40vh;
left: 2vw;
flex-direction: row;
}
.sponsimg{
width: 14%;}
#welcome{
left: 28vw;}
#welcome h2{
font-size: 13vw;}
#welcome p{
width: 67vw;}
.homecontainer{
width: 64vw;
left: 9vw;
height: 43vh;
top: 57vh;}
.homeheader{
font-size: 6vw;}
.hometext{
font-size: 3vw;
line-height: 1.5;}
#map{
width: 70vw;
left: 12vw;
top: 53vh;
height: 30vh;}
#contactus{
left: 26vw;
top: 82vh;}
#divmedia{
width: 80vw;
left: 7.7vw;
bottom: 3vh;}
.media{
font-size: 9vw;}
#menucontainer{
top: 48vh;
height: 75vh;
width: 121vw;
left: -14vw;
justify-content: space-evenly;
}
}
and the html but most of the tings are created via vanilla js:
<!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">
<script defer src="./main.js"></script>
<title>Burter Burguer Inc.</title>
<link rel = "icon" href =
"../images/burguerlogo/logo.png"
type = "image/x-icon">
<link rel="stylesheet" href="stylesheet.css">
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA89atXDJHDp5fVs2YF-DB1fQXVbn3GgZM&callback=initMap">
</script>
</head>
<body id="body">
<div id="header">
<img id="logo" src="../images/burguerlogo/logo.png">
<h1 id="burter">BURTER INC.</h1>
<div id="navtabs">
<button id="homebutton" class="tab">HOME</button>
<div class="divisor"></div>
<button id="menubutton" class="tab">MENU</button>
<div class="divisor"></div>
<button id="contactbutton" class="tab">CONTACT</button>
</div>
<div class="removable" id="welcome">
<h2>WELCOME</h2>
<p>To your new favourite food...</p>
</div>
<img id="imgside" src="../images/Clever Photo Mashups by Stephen McMennamy.jpeg">
<div id="sponsors">
<img class="sponsimg" src="../images/mc_cain-removebg-preview.png">
<img class="sponsimg" src="../images/cocacola-removebg-preview.png">
<img class="sponsimg" src="../images/corona-removebg-preview.png">
<img class="sponsimg" src="../images/heinz.png">
</div>
</div>
<div style="display: none;" id="map"></div>
</body>
</html>
I looked for answers but couldn't find anything that could help me so I would really apreciate your help in order to fix these because I'm trying to build a portfolio but non responsive webs don't look good at all. Thank you !
It might be because your positioning of the elements are based on viewport size, but the actual size of the elements aren't shrinking/expanding based on viewport. I personally wouldn't use vh units, but if you must, try shrinking the elements slightly as viewport dimensions get smaller.
Related
I use a popup for Youtube videos. Accordingly, I use the "yotubevid" class.
My HTML code looks like this:
<a class="youtubevideo" href="https://youtu.be/">
<img class="youtubevideo-poster" src="example.com/image.png" width="100%" height="auto"></a>
This class and div trigger a popup in the background. And it works well. How can I add a custom play button without breaking this class structure?
I think this is what you exacty needed...!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.playBtn{
width: 2em;
height: auto;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
vertical-align: middle;
z-index:1;
}
a{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
}
</style>
<body>
<a class="youtubevideo" href="https://www.youtube.com/">
<img class="playBtn" src="https://www.pngitem.com/pimgs/b/255-2554901_recording-icon-png.png" alt="">
<img class="youtubevideo-poster" src="https://picsum.photos/200/300" width="100vw" height="auto">
</a>
</body>
</html>
I am developing a project for school and I am pretty new to Bootstrap and I keep having some problems with scaling the website for different resolutions. When I change it to mobile the images go on top of the text. If anybody could help me I would appreciate it.
I have tried everything and still cant find a solution.
<body>
<div class="container">
<nav class="navbar-fixed-top sticky-top navbar" style="width: 100%; background-color: white; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);">
<div class="navbar-header">
<a class="navbar-brand"><img src="transferir.png" alt="" style="height: 65; width: 60px"></a>
</div>
<div>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Features</li>
<li>Contacta-nos</li>
</ul>
</div>
</nav>
<div class="site-index">
<div id="home" class="block home-block">
<div class="container">
<div class="col-sm-6 left-block">
<div class="text-centered">
<h1>Texter</h1>
<p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
<p class="Medium-text">Download Em Breve</p>
<img src="playstore.png" alt="Playstore" class="d-img">
<img src="appstore.png" alt="Apple App Store" class="d-img">
</div>
</div>
<div class="col-sm-5 right-block">
<img src="phones.png" style="height: 350px; float: right; vertical-align: middle; width: auto !important; position: relative">
</div>
</div>
<hr class="sombra">
</div>
</div>
Css
html{
scroll-behavior: smooth;
}
body{
padding-top: 1%;
font-family: 'Lato', sans-serif;
}
.block{
padding: 35px;
}
.home-block{
min-height: calc(100vh - 90px);
}
#home .container{
height: 500px;
}
.left-block{
text-align: center;
top: 30%;
}
.right-block{
bottom: 35%;
margin-left: 25%;
}
.container{
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Desktop
When i squish the page
First of all, you probably forgot to include <div class="row"></div> wrapper inside your <div class="container">...</div> element, just as it says here.
Secondly, I strongly recommend you to not play too much with CSS properties such as position: relative/absolute, top: ...; left: ...; right: ...; bottom: ..., because most of them break the CSS native document flow and they should be used only when other tools do not help much.
I suggest you reading this series of articles if you have enough time: CSS layout
I turned off most of the properties of that kind and it already looks much nicer:
This answer would be just be a massive advice if I wouldn't provide some code help, so here it is.
Start by disabling these properties in DevTools:
.home-block{
/* min-height: calc(100vh - 90px); */
}
#home .container{
/* height: 500px; */
}
.left-block{
/* text-align: center; */
/* top: 30%; */
}
.right-block{
/* bottom: 35%; */
/* margin-left: 25%; */
}
Fixing Bootstrap markup:
<div id="home" class="block home-block">
<div class="container">
<!-- Added this wrapper, changed .col-* classes to responsive -->
<div class="row">
<!-- Removed .left-block class -->
<div class="col-sm-12 col-lg-6 left-block">
<div class="text-centered">
<h1>Texter</h1>
<p class="info-text">Send text messages, voice messages, video messages or video call with all your friends and family easily, quickly and securely.</p>
<p class="Medium-text">Download Em Breve</p>
<img src="playstore.png" alt="Playstore" style="height: 40px;">
<img src="appstore.png" alt="Apple App Store" style="height: 40px">
</div>
</div>
<!-- Removed .right-block class, added .text-centered class -->
<div class="col-sm-12 col-lg-6 text-centered">
<!-- Removed inline styles (bad practice), changed "height" to be an attribute -->
<img src="phones.png" height="350">
</div>
</div>
</div>
</div>
Then you would get this picture (no interval between image and the button on the top):
This one is solved by applying margin-top: ...px; to the image block, wrapped in #media query at .col-md-* resolutions and lower. For the exact values see Bootstrap grid options. For more info on applying #media queries see MDN docs
As for navigation bar, I first suggest you disabling padding-left on ul#menu element:
#menu {
padding-left: 0;
}
Although it fixes it on sm resolutions, the navigation menu still wraps under the logo on resolutions less than about 520px. I suggest you imagine what to do with this occasion in your mind or in some markup service like https://app.diagrams.net/ and then develop what you decided to.
You can use
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
See this and this
body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #1478a0;
font-size: 16px;
font-family: 'Alef', sans-serif;
}
a.nounderline span{
color: #ffffff;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 8px;
background-color: #000000;
}
.floating-menu{
margin: 0 auto;
right: 25px;
position: fixed;
font-family: 'Changa One', cursive;
font-size: 16px;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
height: 42%;
}
.icon {
width: 32px;
height: 32px;
}
a.new_paragraph span {
line-height: 0em;
display: block;
}
.main-menu{
margin: 0;
padding: 0;
top: 10px;
bottom: 10px;
list-style: none;
}.main-menu li a{
text-align: center;
text-decoration: none;
outline: none;
line-height: 3em;
display: block;
padding: 10px;
color: #fff;
border-radius: auto;
position: relative;
top: 36px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.main-menu li a:hover{
color: #1478a0;
}
.menu-bg{
background: dodgerblue;
position: absolute;
width: 100%;
height: 100%;
border-radius:55px;
z-index: -1;
top: 0;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Access Denied">
<meta name="author" content="AccessDenied">
<meta name="keywords" content="Social Media">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AccessDenied</title>
<link href="https://fonts.googleapis.com/css2?family=Changa+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alef:wght#700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="container">
ACCESS<span>DENIED</span>
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<nav class="floating-menu">
<ul class="main-menu">
<li>
<a href="https://www.google.com" class="absoluteCenterWrapper">
<img class="icon" src="http://cdn.onlinewebfonts.com/svg/img_311846.png" class="absoluteCenter">
<div>LOGIN</div>
</a>
</li>
<li>
<a href="#" >REGISTER</a>
</li>
<li>
<a href="#" class="new_paragraph" >GET<span>PREMIUM</span></a>
</li>
<li>
</li>
</ul>
<div class="menu-bg"></div>
</nav>
</sidebar>
<footer>
</footer>
</body>
</html>
Hello community,
I added an icon for my navbar for the login, but when I load the website, the icon doesnt load instantly. How can I change it? I heard that it's better to use links for inserting pictures or icons to your website because it loads faster than when having a seperate picture in your project file as .png or .jpg.
It really sucks that its slowly loading, usually on other websites its instant.
Thanks!
The reason is its a massive image scaled down to icon size with your CSS and is probably being grabbed from a slow server. Here, all I did was reupload that icon to imgur and made it smaller. See here: https://i.imgur.com/76JuT8K.png?1 And look how your code runs now:
body{
margin: 0 auto;
background: #fff;
}
a.nounderline{
text-decoration: none;
outline: none;
color: #1478a0;
font-size: 16px;
font-family: 'Alef', sans-serif;
}
a.nounderline span{
color: #ffffff;
}
div.container{
text-align: center;
box-sizing: border-box;
margin: 0 auto;
padding: 8px;
background-color: #000000;
}
.floating-menu{
margin: 0 auto;
right: 25px;
position: fixed;
font-family: 'Changa One', cursive;
font-size: 16px;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%);
height: 42%;
}
.icon {
width: 32px;
height: 32px;
}
a.new_paragraph span {
line-height: 0em;
display: block;
}
.main-menu{
margin: 0;
padding: 0;
top: 10px;
bottom: 10px;
list-style: none;
}.main-menu li a{
text-align: center;
text-decoration: none;
outline: none;
line-height: 3em;
display: block;
padding: 10px;
color: #fff;
border-radius: auto;
position: relative;
top: 36px;
-webkit-transition: none;
-o-transition: none;
transition: none;
}
.main-menu li a:hover{
color: #1478a0;
}
.menu-bg{
background: dodgerblue;
position: absolute;
width: 100%;
height: 100%;
border-radius:55px;
z-index: -1;
top: 0;
left: 0;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="Access Denied">
<meta name="author" content="AccessDenied">
<meta name="keywords" content="Social Media">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AccessDenied</title>
<link href="https://fonts.googleapis.com/css2?family=Changa+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Teko:wght#600&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alef:wght#700&display=swap" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
</style>
</head>
<body>
<header>
<div class="container">
ACCESS<span>DENIED</span>
</div>
</header>
<main>
<aside>
</aside>
</main>
<sidebar>
<nav class="floating-menu">
<ul class="main-menu">
<li>
<a href="https://www.google.com" class="absoluteCenterWrapper">
<img class="icon" src="https://i.imgur.com/76JuT8K.png?1" class="absoluteCenter">
<div>LOGIN</div>
</a>
</li>
<li>
<a href="#" >REGISTER</a>
</li>
<li>
<a href="#" class="new_paragraph" >GET<span>PREMIUM</span></a>
</li>
<li>
</li>
</ul>
<div class="menu-bg"></div>
</nav>
</sidebar>
<footer>
</footer>
</body>
</html>
This may depend on your server and cdn config BUT as written,
It loads pretty darn fast (there is no loading animation or logic waits just load order and parallelization issues). If you want it to load faster you can offset your font links, each of those is going to take up a DNS lookup and load BEFORE your image. You can either prefetch, async, or defer these. If you are going to add a css reference do the same. Javscript do the same. Internal CSS style tag move it to bottom of body. You can also move fonts, js, css to local file so it doesn't use DNS to do lookups. Additionally, your CDN is serving on http1.1 ideally you want http2 for more parallelization. Finally, you have no caching on the image on web, this should be set in your CDN for that image or image file types in general. That means you'd only ever need to download it one time.
Much more server specific is cache control for your other assets. If you make people download js, css, fonts everytime they load your site then its always gonna suck up more time than if you cache it.
It's slow on my machine too - over 600 ms - and it does not get cached.
If you don't have better options as far as a sever to host it on, you could consider embedding it directly into your HTML. Here's a site that will convert your existing URL into a base 64 img tag, that you just include directly in your page and there's no additional load needed:
https://base64.guru/converter/encode/image/png
If you link to an external asset, the loading time can only be as fast as the speed and throughput external source's servers permit for the nature and size of the asset. In general, images are always going to load more slowly than text, html and your CSS styles. There are ways to mitigate against this using optimisations in front- and back-end code, but there are also low-hanging fruits if you wish to keep your project relatively simple. It's worth noting that all of the icons on the homepage of onlinewebfonts.com took a little while to load, and it's probable that they aren't prioritising performance as a free and honestly rather old-school looking service.
I have a few suggestions that may help you out.
Firstly, the gold-standard for external icons (many of which are completely free) is fontawesome.com. They provide copy-and-paste html for hundreds of modern, performant icons plus guides for hosting, CSS styling and accessibility.
Secondly, consider the format and resolution of the content you wish to include. The icon you have chosen is a medium-to-large PNG. Considering the rendered size of the icon, this could be overkill and would naturally increase the load time. As Dai mentioned, self-hosting gives you more control over loading and content sizing; you could create a smaller, optimised version of the file and host it yourself with your html and css files.
Finally, depending on your project goals, you could consider a more advanced solution and create your own icon using the SVG html element. SVGs give you a tonne of creative flexibility in an efficient, embedded format which doesn't load via a separate HTTP request but simultaneously with your html. (Worth noting here that this does mean these icons cannot be cached or pre-loaded.) There are loads of free-to-use SVG code templates if you search for them, or you can attempt to create a unique one of your own design using the numerous permitted shape and fragment elements, or in a vector graphics program like Adobe Illustrator. Lots more on SVGs at csstricks.com.
Hope this helps!
JS will not change the nav-hidden display property from none to flex. I tried with !important, that seems to work in some cases, but I would like to know why this does not work, so that I can understand this better.
When I press the button there is a new class assigned to the element, but the property stays as none.
What I was trying to do: have nav-hidden only appear when I click on button over the whole screen when the screen is smaller than 700px, and have nav-line in line with the logo inside when screen is wider than 700px.
function myFunction() {
var fullnavigation = document.getElementById("nav-hidden");
fullnavigation.classList.toggle("open-nav");
}
body{
margin: 0;
font-family: 'Roboto', sans-serif;
}
header{
background-color: #009933;
width:100%;
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-evenly;
align-items: center;
}
.logo img{
display: block;
height: 4em;
}
#media screen and (max-width:700px){
.nav-line{
display: none;
}
.open-nav{
display: flex;
}
.nav-hidden{
display: none;
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: #009933;
flex-direction: column;
}
.nav-button{
display: block;
color: #ffffff;
background-color: transparent;
padding: 0px;
border: 0px;
cursor: pointer;
font-size: 4em;
z-index: 9999;
}
}
<!DOCTYPE html>
<html lang="sl">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="slike\favicon\favicon.png" type="image/gif" size="128x128">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="js\index.js"></script>
<link rel="stylesheet" href="css\index.css">
</head>
<body>
<header>
<div class="logo"><img src="" alt="logo"></div>
<button id="nav-button" onclick="myFunction()">☰</button>
<nav id="nav-line" class="nav-line">
<div class="nav-text">DOMOV</div>
<div class="nav-text">O NAS</div>
<div class="nav-text">KONTAKT</div>
<div class="nav-text">POVPRAŠEVANJE</div>
</nav>
</header>
<nav id="nav-hidden" class="nav-hidden">
<div class="nav-text">DOMOV</div>
<div class="nav-text">O NAS</div>
<div class="nav-text">KONTAKT</div>
<div class="nav-text">POVPRAŠEVANJE</div>
</nav>
</body>
</html>
As CSS reads your code successively, .open-nav class has been intercepted by the next one .nav-hidden. Problem is not in your JS code and if you look to this JSFiddle it works and js switches your class well. Just put .open-nav after .nav-hidden
#media screen and (max-width:700px){
.nav-line{
display: none;
}
.nav-hidden{
display: none;
position: fixed;
top: 0;
width: 100%;
height: 100%;
background-color: #009933;
flex-direction: column;
}
.open-nav{
display: flex;
}
}
.classList.toggle('className') : When only one argument is present: Toggle the class value; i.e., if the class exists then remove it and return false, if not, then add it and return true.
So your JS will add the "open-nav" class but won't remove the "hidden-nav". I think the error might come from that.
Tell me if you need more help after that.
Source:
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList
I would like to use the very excellent texteditor CodeMirror in fullscreen mode in a browser window and I would like to add a fixed header for some kind of menu - or at least space for a few buttons with some functionality.
So I've added a div with "position: fixed" to the top and added a padding-top to the div with the codemirror object. The problem comes up, when there's enough text that scrolling happens. After moving the cursor down/scrolling the content up and moving the cursor up again, the cursor goes behind the div but the content doesn't scroll fully down. Cursor is hidden, I cannot see the content. Only scrolling via scrollbar works.
Do I need to change the html/css with the fixed div?
Or do I need to check whether the cursor comes behind/under the div and I have to let CodeMirror scroll manually? I tried this but didn't manage to do it programmatically :-(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel=stylesheet href="http://codemirror.net/doc/docs.css">
<link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
<script src=http://codemirror.net/lib/codemirror.js></script>
<script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>
<style type=text/css>
.CodeMirror {float: left; width: 100%; height: 100%; }
</style>
</head>
<body>
<div style="position: fixed; height: 28px; z-index:999; width: 100%; background: lightgray;">
<button>Some action</button>
</div>
<div style="padding-top: 23px">
<textarea id=content name="content"></textarea>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
mode: 'application/x-httpd-php',
lineNumbers: true
});
</script>
</body>
</html>
check out here as well: http://jsfiddle.net/fxvef3bw/1/
I found a solution on my own.
Instead of two overlapping divs, I use two divs (non-overlapping), with style "position: absolute". They don't overlap, so scrolling is fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel=stylesheet href="http://codemirror.net/doc/docs.css">
<link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
<script src=http://codemirror.net/lib/codemirror.js></script>
<script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>
<style type=text/css>
.CodeMirror {float: left; width: 100%; height: 100%; }
</style>
</head>
<body>
<div style="padding: 1px; position: absolute; margin: 0px; top: 0px; bottom: auto; left: 0px; right: 0px; width: auto; height: 24px; background: lightgrey;">
<button>some action</button>
</div>
<div style="padding: 1px; position: absolute; margin: 0px; left: 0px; right: 0px; top: 28px; bottom: 0px; width: auto; height: auto; ">
<textarea id="content" name="content" style="display: none;"></textarea>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
mode: 'application/x-httpd-php',
lineNumbers: true
});
</script>
</body>
</html>
Updated jsfiddle is here: http://jsfiddle.net/fxvef3bw/2/
I hope I can get some comments about possible side effects or drawbacks of the position absolute. Otherwise it seems to be fine for me.