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.
Related
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.
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.
My website: click
How to make the website bigger on mobile phones? I would like to have bigger logo and other stuff. The zoom property is not working on iPhone, as I have this in my CSS:
#media screen and (max-width: 767px) {
body {
zoom: 150%;
-moz-transform: scale(1.5);
}
}
Zooming your website is a bad idea. Try adding this to your <head> and read more about the viewport meta tag on Mozilla Developer Network.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
first set your viewport
<meta name="viewport" content="user-scalable=yes, minimum-scale=0.75, maximum-scale=3.0" />
the write zoom like
zoom: 1.8;
I created my website and want to make it mobile friendly.
So I created a media query and started working with it. Checking while scaling my browser window.
If I check the same page on a phone it doesn't change the layout.
I can't see what I'm missing.
Here is what I have:
HTML:
<div>
<p>
<h2>Title</h2>
</p>
</div>
CSS:
#media (max-width: 768px) {
h2{
font-size:2.5vw !important;
}
}
h2{
font-size:1.5vw;
}
Hope I missed just a small thing :-)
M.
Sounds like you need to tell the device to use its actual pixel width:
<meta name="viewport" content="width=device-width, initial-scale=1">
Some devices will render pages assuming they are not optimized for mobile. Put that meta tag in your <head> tags and let us know if that fixes it. More info here.
Try adding this into your code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Try this
#media only screen and (max-width:768px) { ... }
OR
#media only screen and (min-width:320px) { ... }
I am building an reponsive-website, having 3 sizes. Max 480px, max 768px and max 1024px+;
However, I have a problem when using the iPad. On a Galaxy Tab 10.1 it works like a charm, in my browser it works also good.. but it seems that whenever I use the iPad it always seems think the max-width is 768px.
This is what I mean:
This is my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<style type="text/css">
body {
background-color: red;
}
#media screen and (max-width: 480px) {
body {
background-color: green;
}
}
#media screen and (min-width: 481px) and (max-width: 1023px) {
body {
background-color: brown;
}
}
#media screen and (min-width: 1023px) {
body {
background-color: blue;
}
}
</style>
<body>
<div class="color">
Some color
</div>
</body>
</html>
Although my requirements do not include iPad support, I do want to support it.
This has probably to do with max-scale, min-scale and initial-scale - try setting all of these to 1 and see if anything changes.
The downside is that iOS users won't be able to pinch to zoom in your page.
When you rotate the iPad it doesn't change the viewport, rather it scales the content. There is a good explanation from Allen Pike.