html responsive webpage code issue using visual studio code html5 - html

I'm developing a website and I'm struggling with the nav bar and my main issue is that the html responsive code is not working with me i don't know why can someone guide me?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
this is my responsive html code I only write it in html page I should write another responsive code in css?

Then you start your yiur html filelike this:
<!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">
<title>Document</title>
</head>
<body>
<div class="container">
</div>
</body>
</html>
meta viewport is important but you need to add #media with breakpoint that you need in your css file, for exemple like this:
.container{
width: 90%
background: red;
height: 100px;
}
#media screen and (min-width: 800px) {
.container {
width: 80%;
background: green;
height: 200px;
}
}
Here you will find more informations.

Related

Why does my mobile website look bad when zoomed out on mobile?

I'm building a business website for a company a friend and I came up with, but the mobile version of it is terrible if you zoom out on a phone.the website is B.C Infinity Contracts (https://bcinfinitycontracts .ca).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Welcome to B.C Infinity Contract Solutions</title>
<meta name="description" content="Let B.C Infinity Contract Solutions be your choice for landscaping, lawn work, and odd jobs in the okanagan."/>
<meta name="keywords" content="landscaping, odd jobs, painting, lawn Care, penticton,south okanagan"/>
<meta name="robots" content="index,follow" />
#media (min-width: 768px) and (max-width: 991px) {
#bs-example-navbar-collapse-1 {
padding-right: 0;
float: right;
}
#bs-example-navbar-collapse-1 > ul:last-child {
display: none;
}
}
#media (min-width: 768px) and (max-width: 1366px){
.imgresize{
width:95%;
height:95%;
}
}
#media (min-width: 1px) and (max-width: 767px){
.imgresize{
width:25%;
height:25%;
}
}
Try changing your meta tag for viewport to the following. <meta name="viewport" content="width=device-width, initial-scale=1">
Next you'll want to modify some of your CSS to better work with the responsive design.
Specifically on the website you have a logo that isn't responsive.
<img alt="logo.jpg" class="center-block" src="images/logo.png">
You can make this more responsive by adding some CSS to it.
try
width: 100%;
max-width: 1028px;
This should give you a base to work on your responsive design.

Div Elements Not Showing Properly

I have been having this problem for a couple of weeks now. I have this code
div{
margin: 0;
padding: 0;
border: 5px outset black;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p>testing</p>
</div>
</body>
</html>
and it is doing this:
I have looked at tutorials, searched on Stack Overflow, and even when I run it in the code snippet, it works. What am I doing wrong!?!?
Edit: I also wanted to add this image to show you that it works perfectly fine in the code snippet.
Try opening it with a different browser.

Does new Chromium-based Edge have shorter vertical height than Chrome? Header half disappears in Edge, but is fine with Chrome?

I'm relatively new to Front End development, and have been trying to improve my core CSS skills.
I've come across a quirk between Edge (Chromium) and Chrome which does not make much sense to me.
I've attached two images of the same example index.html page opened in both Edge and Chrome.
You can see that in Chrome the text fits fine, but in Edge the text is cut in half! Does Edge do something different with the top margins?
Here is my attached HTML:
<!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="./assets/css/style.css" type="text/css">
<title>Hello World</title>
</head>
<body>
<header>Hello, World!</header>
</body>
</html>
And the css:
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
width: 100vw;
}
header {
background-color: rgb(115, 165, 216);
}
header {
width: 100vw;
height: 60px;
}
Thanks for your help! :)

Problems forcing a page break in HTML on printing

I am trying to force a page break on to the printed version of my page. I am doing this by styling sections that I want to break into a new page. The problem I am having is that when I print an empty page is inserted between the elements. So the page break is working but adding an extra blank page between.
For example the below code should print two pages but it actually prints 4 in total (the two I want and two blank pages).
here is the full html code of the page , including css below;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>DEMO</title>
<style type="text/css">
/* JUST IMPORTS , RESTS & MINIMAL DEFAULTS */
/* CSS reset */
* {
padding: 0;
margin: 0;
}
.container-flex-column {
display: flex;
flex-direction: column;
}
.page-width-mobi {
min-width: 1072px;
max-width: 1072px;
}
.new-page {
page-break-before: always;
box-sizing: border-box;
border-bottom: solid lightgray 20px;
}
.page-size-mobi {
min-height: 1505px;
max-height: 1505px;
min-width: 1072px;
max-width: 1072px;
}
</style>
</head>
<body>
<main class="container-flex-column page-width-mobi">
<section class="new-page page-size-mobi">
<h1>Page 1</h1>
</section>
<section class="new-page page-size-mobi">
<h1>Page 2</h1>
</section>
</main>
</body>
</html>
The problem I was having was that I was printing the document with an old version of safari. Safari did not consistently work with the break-before command. I was able to produce the desired outcome printing in an up to date version of chrome
The break commands and the #page css commands are new functionality and not widely supported

Why is "width=device-width" totally not working?

I have a problem with setting media queries on devices. It doesn't work at all. It works like normal width. Why is that?
<meta charset="UTF-8" content="initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, width=device-width">
And this is how I use it:
#media only screen and (min-width: 600px) {
background-color: lightblue;
}
It is very simple. You didn't put background-color: lightblue; in a tag
it should be in something like a html or body tag.
You should also update your meta tag to
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
Your code should look something like this:
html{
background-color:red;
}
#media only screen and (min-width: 600px) {
html{
background-color: lightblue;
}
}
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
If you want the webpage to turn light blue when it is smaller then 600px you should swap the two colors
For more info you can go to w3schools they explain media queries very clearly.