Kinda broad question but I've got something wrong in regards to my website's (https://huskybiz.com) viewport. I'm trying to format it to look good at all viewport sizes. The issue is with the mobile formatting. I try adding the standard viewport meta tag
<meta charset="utf-8" name="viewport" content= "width=device-width, initial-scale=1.0, user-scalable=no">
However this results in only a portion of my website being shown on mobile with the rest flowing off the screen, as shown here:
As of now my solution has been to make the initial-scale = 0. I know when the initial-scale=1 there is no initial scale so I honestly don't know what having it equal means but it does make my entire website scale onto the mobile devices. However with this fix when you first load the website my nav bar does strange things where it starts out 1/2 the width of the viewport before quickly clipping to 100% of it, as shown:
Other than that I have my html and body css like this:
html,body {
margin: 0 auto;
padding: 0;
width: auto;
min-width: 800px;
max-width: 2000px;
height: auto;
min-height: 100%;
}
My two concerns are I don't understand why the initial-width doesn't work when equal to one when from I believe it should, and why my fix has my nav doing that clipping. The min-width of the html is 800 really just for desktops when people try to scale the window too narrow but that might be part of the problem otherwise my nav bar is fixed so it can be hidden/shown while scrolling. That seems to play a role too. Otherwise I'm stumped. Thanks for any help.
Related
I am experiencing a weird issue with my making my website responsive.
I basically have this output of my website on mobile devices:
Even though my body is set to overflow-x: hidden;, there is still white space and I can scroll on the x axis. I do not know why this is happening even though I have set it to hidden.
One thing, however, that might be making this happen is this right here:
When I scroll to the end of the website and then scroll on the x-axis to the farthest right, I see these things. Both the banner and the New icon should appear at the start of my website but somehow I see them at the bottom.
Basically, I am looking for this output:
I even added <meta name="viewport" content="width=device-width, initial-scale=1.0"> but I don't know why my website is not the same width as the device. Any suggestions?
Make sure your html element also has overflow-x: hidden:
html, body{
overflow-x: hidden;
}
Here's my website, If you view this in the browser and decrease the browser width, it'll look fine.
However, if you look at it in your actual mobile device (I tested it on my iPhone) it'll be cut in half. I have no clue why this is happening. I've played around with a lot of meta tags as well. Currently I have this,
<meta name="viewport" content="width=device-width" />
I've tried doing this too,
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
But this makes my website horizontally scrollable up to double the actual width. (it just shows whitespace).
I also have,
overflow: hidden;
overflow-y:auto;
in my media queries, I have no clue why this is happening.
You have problem with <div class="main-headline"></div> it have fixed width width: 1140px; and huge margin-left: 150px; and padding-left: 190px; use just padding for your case.
First set your meta tag to <meta name="viewport" content="width=device-width; initial-scale=1">
Then, your header .main-headline is having 950 width that causes the problem.
The element div with class ".main-headline", has a fixed width of 1140px, that creates that space on the left, try to reduce it or use a max-width: 100% in the media queries.
Cheers
Could try adding:
<body width=100%>
or
<div width=100%>
On Safari you can too check what your website would look like on other devices and iPads by going to Develop > Enter Responsive Design Mode (make sure 'Develop' is enabled in Advanced Settings in Safari Pref).
.main-headline in this class margin-left remove because you use width 100% with margin.
I am working on a site for a client, using a purchased Wordpress theme (so all the code is not necessarily mine, but I can pull something if needed).
The landing page has a responsive background image. On top of that, I need to use images to show the relevant logos (the fields where I input this were intended for text, but they allow images with no problem). The image has a border wrap around it also, and then people can scroll down from there to see the rest of the content.
My problem: on desktop, the logos will rescale with the WIDTH fine. But one of my clients is viewing in a very widescale-oriented browser window (which I figure is unusual across all users, but it's the client!), and the logos do not rescale with HEIGHT changes, so they get cut off by the border wrap.
I've tried things like
.home-section img {
max-height: 50%;
}
Which is what the theme's developer provided initially, and also changed 50% to 50vh (just trying some things I came across online, not a code expert by any means), and also a variation of this solution HERE
with no luck.
My (again, partial) understanding is that since the height of the div with the background image isn't set explicitly, I can't use a percentage height for the logo/child element, but is there a way to solve this?
I'm currently using srcset to get the logos the right size for mobile, but that's not a perfect solution. I figured there may be a javascript solution too, but I'm only about 75% with HTML & CSS and not much with JS/PHP without explicit directions. (Call it capable, but inexperienced).
You can view the issue HERE.
Thank you!
=================================================
EDIT:
A coworker came across this solution, which improves things greatly. The issue still happens at a short enough browser (IE landscape phone viewing, etc), but works on a greater range of viewport sizes:
div.home-section-image {
min-width: 600px;
max-width: 1080px;
min-height: calc(690px * (90/150));
height: 100vh;
width: 100vh;
}
The logos now scale vertically to a point, though the viewport height can still catch them and cut them off, but at a better threshold (at ~550px high, where it happened at ~720px high previously - now well beyond a normal person's minimum browser size, my understanding is ~760px is average).
I tried to combine this with #kburgie's code suggestions to keep the logos completely above the green border, but my results ended up pushing the logos off the TOP of the page instead, which is worse (for me, on a horizontal Galaxy S3, I can at least get the main square of the top logo to display, which is enough for me at that size).
Thanks to everyone who helped - I think this may be the best solution I can pull for now!
Seems like you should be able to combine width and height media queries to catch that edge case:
#media (min-width: 1200px) and (max-height: 500px) {
.home-section img {
height: 200px;
width: auto;
}
}
I don't have enough rep to comment or I would. I think isherwood's media query is too specific.
Responsive images should already be responsive by height AND width, and the best way to handle that is by working with the image width.
This is a dangerous selector and you should get rid of it:
img {
height: 100%;
width: auto;
}
It will affect ALL images on your site. You should use a class instead. Beyond that, your images are already set to max-width: 100%, which is all you need.
Focus on your positioning instead
Step 1: Remove your margin top and bottom
.home-section .container { margin: 0 auto; }
Step 2: Absolutely position the image container at the bottom of it's parent. Then it will always stay above the green border. Stick it in a media query if you'd only like this positioning above a certain screen size.
.home-section-image {
position: absolute;
bottom: 10px;
}
I have an issue with fixed position in my website when tilting an iPhone or an iPad. I have read a lot of threads about fixed positioning in IOS but even if it has been a big subject some time ago, it seems that now Safari for IOS is supporting the CSS "position: fixed" (at least partially according to http://caniuse.com/#search=fixed). Indeed it works most of the time but I have one remaining issue when I tilt my device.
I have in my body:
<header>Title</header>
<main>Content</main>
and :
header {
position: fixed;
left: 0;
top: 0;
z-index: 10;
height: 50px;
padding: 0px 10px;
width: inherit;
}
When I look at my website with the landscape orientation, scroll a bit and then come back to portrait, the fixed positioned element (my header) ended up in the middle of the page keeping its landscape size. I just have to scroll a bit manually or just touch the screen and everything is in place again.
How can I avoid this display error just after tilting? I would rather avoid any aditional libraries such as iScroll now that fixed positioning is supposed to be supported. I have also try to scroll with jquery when the screen is resized but it is not working completely.
$(window).resize(function(event) {
var currentPosition = $(window).scrollTop();
$(window).scrollTop(currentPosition+1);
});
With this solution on an IOS5 device, the fixed header stay correctly on the top but when transitioning from landscape to portrait, it keeps its landscape size (a manual scroll with a touch on the screen makes the header get its correct size).
Thanks for your help.
I have done some experiment and I have solved my issue playing with meta viewport tag. My head tag was containing:
<meta name="viewport" content="width=device-width, maximum-scale=1.0" />
I tried:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
Now I do not have the wrong tilt behaviour anymore and the zoom is still disabled. It seems to work on android too and for top and bottom fixed position.
I am using this code to auto resize images to the window size on a mobile page:
img {
width:100%;
max-height : auto;
max-width : 480px;
}
My intention is to show the image in the right size of the window on small screens and max 480px on bigger screens maintaining the ratio.
But for some reason i dont know when i use that code the text around the image goes behind it.
Theres a way to achieve this result using another method like Java or Jquery and avoid this problem?
If you do this for mobile devices I would recomend server resize to save download size.
Regarding the text that goes behind, do you have a more comprehensive testcase showing the actual document this CSS applies to?
You'll end up with squished images if you do that. I think this gives the best result you can achieve with CSS:
#content img {
width: 100%;
height: auto;
max-width: 480px;
}
I added this code in my page and it's working:
img {
width:100%;
max-height : auto;
max-width : 480px;
}
Have you tried using different style sheets for different screen sizes? Then you would just need to write the code for each situation and then load the needed style. It would also come in handy if you have other styles that need to change based on size. Very helpful on mobile sites.
<meta content="width=device-width, initial-scale=1.0" name="viewport">
helps to make sure it scales right. Not sure how helpful it will be, but hope this link helps.
CSS trick for specific style sheet
I've also played around a little, and it seems to work if you set the image as a percentage. I floated one to the left of text and at 50% of the screen and it re-sized text and all. If you need me to post an example, just ask.
use #media to do manual change by the mobile, tablet or desktop size.
by the way mobile and tablet will have landscape and portrait. if you using google chrome to check you can determine it better. sample of website : Media Queries: How to target desktop, tablet and mobile?