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
Related
black space in bottom of the page
Recently I started seeing this black screen after the ios 15 updates in the safari browser , I am using react 16, material UI v4.11 and Dialog to render this modal.
It was fixed after I added height:100vh in the HTML tag
If you're like me and you've poured over every single document you could and nothing seems to work, I managed to find something that I deemed good enough.
My solution was to figure out where the black colour was coming from and just change it to match the colour of my footer.
In your index.html, change this meta tag
<meta name="theme-color" content="#000000" />
and change the colour the match your content. Mine was white.
<meta name="theme-color" content="#FFFFFF" />
Black bar should now be white so it's no longer noticeable.
The downside to this is that if this is happening in multiple places and you have multiple colour schemes on the bottom, you're stuck with that one colour.
But if your app is relatively simple and this is only happening in one place (for me, an input form), then this might be a good enough solution.
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!
I'm trying to get a 1200px page to display in a Samsung S7. Since the S7 has a 1440x2560 screen I would expect the page to display fine, but all I see is about the left quarter of it, with no ability to swipe left to see more. I tried adding a viewport meta tag:
<head>
<meta name = "viewport" content="width=device-width, initial-scale=1.0" />
but I get the same results. Does anyone know how to get this page to display correctly?
The page I'm trying to display is at https://thebarcoderegistry.com/verify/?barcode=040232534218
Thanks
Your wrapper has overflow-x: hidden; Therefore the internal content is cut off when the width of #wrapper on the mobile phone is narrower than the width of the internal content.
Take overflow-x: hidden; off or change it to visible and you will be able to scroll to see the content.
Foundation 5 is toted as being mobile-first, but for a web-app that is desktop-only I need to disable the responsive behaviour that kicks in when shrinking the viewport size.
We're currently using a very minimal grid-only Foundation setup without much customisation.
Is there a way to set a specific app width without having to get the Foundation _settings.scss file to alter the #media queries, as suggested in this post?
If you still want to use the grid, the easy way to disable responsiveness is to remove the Viewport tag in the header:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
And then after Foundation is called in the SCSS or CSS, .row will need to be set to a fixed width rather than max-width:
.row {max-width:none; width:960px;}
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;
}