I'm trying to optimise my website for mobiles and small screens. The website looks perfect on anything 1920x1080 and above. I'm using bootstrap and I can't figure out what's wrong with my code that is preventing the mobile scaling from working.
It seems my background 's arent scaling to the text - that is, these 's appear to be completely static and the text can just overflow past them and stack onto other parts of the page. What I want to happen is for the background colour, (white, grey, dark grey) to extend to the regions of the text on the mobile view.
Thank you in advance.
On every div you height and % (percentage). Take all those out and your site will be ok.
I also noticed the carousel is very slow at loading the pictures. If you compress each to about 200k or less it will load faster and still keep the resolution ok.
you have a <meta name="viewport" content="width=device-width, initial-scale=0.5">
i suggest making this to .8 or .9 or 1
the navbar menu does not adapt to mobile screens. Check the link below to see how a boostrap nav menu should be like and follow the example to create one
http://getbootstrap.com/examples/navbar/
Sections like these should have the same amount of text. So shorten the middle one out a bit, but make all sections equal to the amount of text and lines (example 3 lines or 4 lines of text) so they are responsive. A workaround will be to give a min-height to a section but i dont recomend doing that
Also the heading learning and problem solving is too long. You can change that to Learning
use the viewport meta tag, put it in your head
<meta name="viewport" content="width=device-width, initial-scale=1">
For font sizes, i prefer to use vh(viewport height) & vw(viewport width) to control sizes. That way the size will be proportional to the device view.
Be wary though. the viewport tag may cause rendering issues with height. For this, i use vh.
also, if the page is meant to fit to the screen, it may be a good idea to use "user-scalable=no" in your viewport tag. But only do that if you wish for end users to not zoom in & out.
Related
I'll use the following html as an example:
<div style="width:1cm; height:1cm; background-color:blue;">
</div>
When I render this html (chrome) and change the view size to samsung s8+ the square becomes tiny. However when i insert this html anywhere on most site (ex this very site), it still isn't exactly 1cm but it's at least a lot closer and it doesn't change size when changing the view size.
Is there a HTML, css or js thing i'm missing the styling is identical.
After some more testing, the core issue was that (the width of) elements wasn't scaling past 980 px, causing items to shrink when the view width was less than 980. the solution is adding the following to the header
<meta name="viewport" content="width=device-width, initial-scale=1.0">
this is present on most websites explaining why the problem didn't occur on other sites
source: Site's body and elements are stuck on 980px width, won't scale down
I have a requirement for my Webflow website to load entirely zoomed out on all devices, so I've added <meta name="viewport" content="width=1600"/> to the head of my project in an attempt to solve this. The problem is that I'm still seeing what looks like roughly 150-200px of overflow on an iPhone 6 in portrait mode (375px width). iPhone 6 landscape and iPad all work great...
The strange part is that this fits perfectly if I set the viewport width to 1400, so why does 1600+ make a difference? Surely it should just show the content at the width that I specify. Also, you'd think that if one of 1400 and 1600 were to overflow, it would be the lower width that would have the issue
I thought this was perhaps due to the elements, but I set-up a new page which only had a body element and it was still overflowing by roughly the same amount.
Here's an image of how the page loads:
Here's how it looks if I set the viewport width to 1400 rather than 1600.
Thank you to anybody who can help me here
So I'm having an issue where my site has a lot of padding on the right side, making the layout load incorrectly. It appears correctly in on my desktop when the window is resized, but everything other than the header breaks when viewed on my phone. All of the relevant divs are set to a width of 480px, and I have the following tag in my header for the media query:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Here are screenshots of how it appears on desktop and mobile, as well as a link to my mobile css page (the menu is open on mobile, but the extra space seems to affect it as well).
CSS Page
Edit: I'm now having a slightly different issue, where the margin has been added to the entire right side of the screen. I changed the pixel widths for many of the divs to 100%, as well as adding the <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> tag to the header. While they can no longer zoom out, you can just scroll the screen horizontally to find the padding. I'm also having an issue with my font-face tag, which no longer loads the header fonts. I updated the css file, so hopefully that shows why it won't work anymore.
Also, here's a link to the live site: Link
You shouldn't be setting explicit widths here, (at least not in pixels anyway) and from a brief glance at what you've posted I'd imagine that's where your issue lies.
Firstly, take off the widths that you've set for anything that you intend on being "full width" - remember divs are block-level elements anyway, so if you don't set a width at all, they'll have a width of 100%.
Secondly, take off any other pixel widths you're setting and change them to be percentages instead.
Thirdly, you'll save yourself a lot of headaches if you set 'box-sizing' to 'border-box' (I'd recommend just doing it on '*' for simplicity). This will prevent your padding and margin from being added on top of any widths you set as percentages; they'll be included in the box sizing instead.
Finally, I can't stress enough how important it is to get out of the mindset of things like "mobile" and "desktop". All we're talking about here is different viewport sizes. :)
If you have a live link you can share I'd be more than happy to have a proper look at this.
Add the following to your .css file:
img{max-width:100% !important}
In my website I have some pages consisting with header footer divisons and table,
and I am using viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Html table is consist with so many column so in mobile devices it overflows to the screen.
To see whole html table visitor has to zoom out the webpage.
Like the image refers:
After zooming out you can see in the picture header and div not expanding to match html table width.
And it remains short in width after zoom out, because I am using meta viewport for this and initial scale is 1.0
but I need result like this
refer image:
I need help regarding this- when webpage open in browser of mobile devices.
html table should shrink [zoom out] to device width and all other element should remains same in width or equal to device width.
I searched on net and I found this: enter link description here 4. Responsive Tables
You can use Bootstrap to cover those scenarios. Also, Css, to the image set to 100% with and height, or css tricks to accomplish that. #Media queries may help you to load or change the image dynamically for different device resolutions.
Other than that, I'm not sure if the problem you´re specifying is related to the default view that needs to zoom out as default or not.
I'm working on a website for a small festival for a friend, but I'm trying to work with mobile browsing WITHOUT fluid layouts, ect. It's just a website that I want to use the classic viewport script so it will be at the minimum zoom when a mobile device comes to it.
HTML
<meta name="viewport" content="450, initial-scale=1, maximum-scale=1">
That's what I have now however I have tried this way as well.
<meta name="viewport" content="width=device-width,initial-scale=1">
Yet every single time I come to the site on my mobile device it's zoomed in so you can only see the logo.
What am I doing wrong?
Also there are 2 other things I've noticed when viewing on the phone.
The footer background colour doesn't stretch all the way across (and it's no different if I have device-width OR width="XXX"). Yet the width of my footer is 100%. I don't understand what is happening here.
And I'm trying to put padding, or a space to the left and right of the content so the website isn't resting right up on the side of the window. I want to have space to the left and right. I've tried to put this on the html tag but it only applies it to the left side??
I've gone to https://developer.mozilla.org/en/Mobile/Viewport_meta_tag & http://www.quirksmode.org/mobile/viewports2.html and other websites and can't understand what might be happening in any of these cases.
Any help, advice, direction or guidance is VERY much appreciated.
To fix the background issue try adding this:
body {
min-width: 1024px;
}
You have the top sections of the page inside a container with an explicit width (960px), which is why you aren't having an issue with them. The footer however is on its own without an explicit width set. You could also just enclose it in the same div with the id 'container' you used for the rest of the page.
This should also fix your padding issue. Make sure you are adding it to the content containers. For example:
#main {
padding: 0 1.5em;
}
As for the zooming issue, I am not seeing it on an iPad or an iPhone. Since you are not doing any sort of fluidity or responsiveness this is what you should be using. What initial-scale=1 is doing is zooming it into to its actual width, not fitting it to your screen.
<meta name="viewport" content="width=device-width"/>
You might want to check out this question: Android ignores maximum-scale when using fixed-width viewport meta-tag for the Android issue. I don't have an Android device handy to test so I don't want to give you incorrect info on that part.