I am beginning a landing page for a client. I have made it responsive, but when I open it up on a mobile phone, it pops up large and cuts off the page. I have to pinch the screen and zoom out in order to get the full content. How can I code it to where it is already just 100% there without having to zoom out?
Whether use CSS Media Queries or Boostrap framework which will provide you with predefined classes to add to your HTML elements in order for them to adapt on different screen sizes.
Double check that you haven't hard-coded widths for any images, divs or other elements on the page. Instead use relative sizes when you can, eg width: 50vw; . Setting max-widths is sometimes necessary as well, eg max-width:100%;
As per the earlier suggestion from Blueware, media queries will help you set styles based on the viewport or window size.
Also check that you have included a viewport meta tag in the head of your page:
<head>
....
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
If still no joy, post some code or a URL.
Good luck!
Related
I am hoping to use an image of a map that is divided up by regions as a way to click on a region and it takes you to a page of locations within that region. I tried to divide the image up and making the rest transparent but the whole thing is still clickable. Does anyone know a way that I would be able to achieve this?
This is what the whole image of the map looks like
You can do this without any SVG or JavaScript just using the HTML <map> tag.
Allows you to define clickable regions in the image and associate a link to each.
Ok I left a few comments under your post but I think I can provide a quality answer to close this out.
Take your image and either move it to photoshop/gimp/etc. and convert it to an svg. This will allow you to create each path (country, county, however you want to break it down) and you can export as svg with the path names as the layer names you gave them.
You may not be a photoshop expert...Neither am I. I took your image and pasted it into VectorMagic.com and it was a little big but after a minute it had converted it to an svg for me.
Once you have your SVG it can be placed in the html with the <svg> tag.
You can then give each path a className or id so that you can target it with css. You may have to read up a tiny bit on how to target svg paths with css but its pretty easy.
You can add color change on hover, fade on click, what ever you want to add is possible.
To make sure I'm answering the question you asked. If the whole image is clickable if its an SVG, you are targeting the <svg> when you should be targeting the <path> tags that are children of the svg.
Lemme know if I can answer any questions. This is definitely something everyone doing design should at least play around with because its fun and rewarding when you get it to work the way you intend it to.
I once had a similar issue and used a js library called raphael.js which uses paths to render a dynamic svg and provide interactivity
I struggled to find any current refs to this but here is a tutorial
https://webdesignerwall.com/tutorials/interactive-world-javascript-map
https://cmsdk.com/jquery-plugins/building-an-interactive-map-with-raphael.html
sample I quickly knocked together
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Building an interactive map with Raphael</title>
</head>
<body>
<div class="wrapper">
<div id="map"></div>
</div>
</body>
</html>
https://codepen.io/bar8s/pen/abEBWYx
I'm working on a page here that I can't get to display sanely on a mobile phone. I'm reading it with a Samsung S7. The page looks like this on the desktop (without the width arrow and dimension):
and that's what I would like to see on the S7: a simple scaled down version of the original. The width is 1200px. I have the meta viewport tag below on the page:
<meta name="viewport" content="width=1200, initial-scale=3">
Sometimes this viewport tag works, giving me exactly what I want. But if I load it again, the page may load offset to the left so that the menu is off screen. Or it will load magnified. After it loaded incorrectly once, I kept tapping and swiping and it suddenly snapped to the correct layout above.
I've experimented with the viewport tag. The initial-scale value doesn't seem to have an affect, I've tried 1 and 3 it's worked with both and failed with both. The width seems to have to be 1200 or it will fail everytime.
Can anyone suggest why this is behaving so erratically?
Thanks
a simple scaled down version of the original.
For that, you should not use
<meta name="viewport" content="width=1200, initial-scale=3">
Use
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Because, if you set width=1200px, you may have to scroll it in mobile device.
But in width=device-width, it automatically fetch the available width of device and stretch accordingly.
You can read the official documentation here on MDN
There are some other attributes regarding to zooming.
They are minimum-scale , maximum-scale, user-scalable.
minimum-scale -> The minimum zoom level <int> value
maximum-scale -> The maximum zoom level <int> value
user-scalable -> Whether allow the user to zoom or not. yes or no
At http://sallymilo.com/aem/, when I move my browser narrower, this template narrows to one column as I want. On my phone, however, I'm just seeing the whole template on one screen. I'm quite new to responsive design, so I must be missing something obvious to those of you who know better than I. Please advise.
It's an easy fix, you need to have a viewport meta tag in the head of your page, without this the default behaviour of mobile devices is to scale your page to fit the screen.
Here's a starting suggestion:
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
https://css-tricks.com/snippets/html/responsive-meta-tag/ has more details on some of the properties you can set within the meta tag.
I am making my webpages responsive but struggling to keep elements on the page not to go over each other. I am quite new to web development so I don't even know how to approach the issue. I would really appreciate some general suggestions at this stage to help me to get my head around it and move forward.
A few suggestions to get you started.
Begin by including a viewport meta tag in the head of your document, this will stop smartphones and tablets from scaling your page to fit the viewport (screen)
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
Use CSS to define element sizes because then you can restyle elements at different viewports. Also try and avoid including hard pixel dimensions for any elements because they will likely cause problems on small screens, opt for a width of say 100% over 960px
There will be times where you need to change the layout on small screens. For example two side by side images, each with a width of 50% may not work on a smartphone. When this happens, use media queries to change your layout
CSS
img{
width:50%;
height:auto;
}
#media screen and (max-width:400px) {
img{
width:100%;
}
}
Hope this helps get you going!
Update
See if this is closer to what you are after (note the placeholder images may be slow to load):
live view - http://s.codepen.io/panchroma/debug/ZOqgzx
edit view - http://codepen.io/panchroma/pen/ZOqgzx
The important bits are:
in your HTML I've removed the inline styling you had for the images and moved it to the CSS starting at line 65
starting at line 134 in the CSS I've built out the #media styling for narrow viewports. Note that I've collapsed your 2 column layout to a single column layout as well. This detail is completely optional but gives you more room to work
at line 4 in your HTML you have <link href="index_responsive.css" rel="stylesheet" media="screen and (max-width: 800px)" /> . Technically here's nothing wrong with this, though it's more common to use the one style.css file and include everything in that one file, and the #media screen ... statement and styling in that style.css file
I'm trying to configure a viewport for mobile Safari. Using the viewport meta tag, I am trying to ensure that there's no zooming, and that you can't scroll the view horizontally. This is the meta tag I'm using:
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
On my iPhone when I load the page, it seems to look okay:
But I can scroll horizontally, so that it looks like this (this is as far to the right as I can go:
When I swing it into landscape view, the page renders as expected, locking the horizontal scroll position.
I'm trying to figure out how to make this page not scroll horizontally at all. Is it possible that I've got some page element pushing the content out? I wouldn't even expect that to be possible with a correct viewport set, but I'm grasping at straws here.
Is it possible that I've got some page element pushing the content out?
Yes, that is indeed the case. The viewport setting only defines the visible viewport area but does not deal with turning off sideway panning.
So, in order to avoid this from happening, set an overflow:hidden on the element that contains your content, or else, avoid elements from overflowing.
NB: other mobile browsers also support the viewport meta tag since a while, so you'll want to test in those as well.
body { overflow-x: hidden; } also works.
Late to the party here, but I just had a similar problem where I had horizontal scrolling across an iPhone 5, the site was effectively showing as double the width, with the right hand half completely empty.
In fact, I just needed to change the viewport meta tag from:
<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0' />
to:
<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />
Adding the 'initial-scale' locked it down so that it only scrolled vertically as expected.
This will prevent any elements pushing content out:
body div {overflow: hidden ;} # media queries
Try this variant:
html, body{
overflow-x: hidden;
}