I have an image that jumps down and out of its div when I narrow my browser. I've tried all kinds of things to prevent this from happening and haven't been able to turn the right key (I'm not taking to responsive web coding very naturally. I might have hit my limit here....).
Any suggestions are welcome.
It's the contents of the <div id="fadeshow"></div> that jump downward upon narrowing the browser.
At first glance I'm thinking it has something to do with the min-width setting in the #fadeshow div. If you notice the min-width is set to 580px which is about where the image jumps when downsizing the browser. Is there a particular reason for the min-width setting and can it be removed?
#fadeshow {
max-width: 800px;
margin: 0 auto;
display: inline-block;
vertical-align: middle;
line-height: normal;
min-width: 580px;
}
The problem is that the 'outer' div in which the image is contained does not have a CSS min-width.
So when the screen size is reduced so that the screen width is less than the width of the image (580px), the outer div keeps shrinking and the image pops out.
If you add min-width: 590px; to the .outer style you should find that the problem is fixed.
I tested it in developer tools and it was fine.
the problem is with this line
<div class="emptyDiv verticalCenter"></div>
i dont know why u have included this but surely its the reason your image jumps downward upon narrowing the browser.
and foraligning your image in the center u can change the
.outer .inner {
padding: 10px;
}
to
.outer .inner {
padding: 45px; //or whatever suits your design
}
Related
I have an image that I want to achieve a certain effect. Essentially as you make your browser window smaller, I want to crop off left and right side equally, so that the image is not resized and I always see the center.
I have accomplished that in the following way:
<style>
.banner{
text-align: center;
overflow: hidden;
height: 350px;
position: relative;
}
.banner img{
position: relative;
left: 300%;
margin-left: -600%;
}
</style>
<div class="banner"><img src="https://lh3.google.com/u/0/d/0B1qZWmK2ucS8ZDN3Ni02VXo2SEE=w1129-h720-iv1" alt="Image is missing" /></div>
Js fiddle: https://jsfiddle.net/szsj6f9m/
One thing I have noticed with this approach is that if I make left be 100% and margin-left be -200% the image will then half way through start sliding back to the right. I don't fully understand why, I just know that I need to make the percentage to 300% so it behaves correctly on 320px screen.
Here is the example of what I am talking about, just resize your browser small to big and you will see what I am talking about:
Js fiddle: https://jsfiddle.net/szsj6f9m/1/
My question is this:
Is it ok to have the position of the screen so far and throw such a large left-margin on it? Does this causes any kind of problems from the performance point of view on smaller devices or any devices really? Are there any reasons you can think that would say not to do this.
I personally use left:50%;transform:translate(-50%,0); (works even for vertical centering) top:50%;transform:translate(0,-50%); https://jsfiddle.net/szsj6f9m/3/
http://www.dirkdunn.com/web2
I recently made a responsive layout, setting the..
max-width:100%;
property in google chrome, which works perfectly for adjusting the header image size, however, in other broweser's such as firefox, the image overlaps the parent container on the left size.
I am familiar with scott jehls picture.js polyfill, however specifying the image size for each screen size sounds like a headache inside the picture tags, is there any way to combat this in other browsers similarly to how google chrome resizes this naturally?
or at the very least, is there some kind of math formula for knowing the right picture size via the browser width? thanks.
You have set the max-height of img to 100%, however you don't have the width of it's parent defined. So, it becomes confusing to the browser to determine 100% of what thing.
Let's give the parent a width -
#headlogo {
width: 100%;
}
Also set the margin accordingly, you might wanna use margin: 0 for #headlogo.
Simply remove the h1-parent of the image and it works. (FF 32)
Try this one
max-width: 100%;
display:block;
height: auto;
Assuming you are trying to center the logo.
I would remove the float: right from the H1 and remove the margin you have. Than I would add a text-align: center to the H1. This will solve your responsive logo issue and keep the logo centered.
Your Current CSS
#headlogo {
float: right;
margin: 0 15% 0 0;
}
Proposed Solution CSS
#headlogo {
text-align: center;
}
I want to achieve a menu bar whose background extends to the length of the browser window, while the actual menu is centered in the middle. I have the following CSS code to achieve this:
.menuContainer {
position: relative;
height: 60px;
width: 100%;
margin-top: 60px;
padding: 0px;
z-index: 2;
background-color: white;
}
.menuContent {
position: relative;
width: 1000px;
height: 40px;
top: 10px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-family: Verdana, Sans-Serif;
color: black;
font-size: 12px;
}
This solution works fine in all major web browsers, but when I view it on iPad, the right-side of the container gets cut off at about 3/4 of the browser window. What is interesting is that, if I change the position of the container to 'fixed,' it works just fine, but unfortunately that is not what I need. I need this menu to scroll with the page's content.
Any idea what I did wrong?
UPDATE 1.:
I think I am zeroing in on the problem. After trying all your suggestions, including getting rid of the inner div, as well as playing with the width, I realized what the problem might be:
The container automatically inherits the width of the browser window, which on iPad is around 1000 pixels. But I have elements on the webpage that are wider than that, stretching the content area above a 1000 pixels. So, while the content of the webpage is stretching just fine, the 100% width element remains the width of the original browser window at about 1000 pixels and do not updates automatically like it does on desktop browsers. what baffles me, however, is why isn't 'fixed' positioning affected by this? I am trying to use min-width at the moment to fix this problem.
I hate to answer my own questions, but the problem was what I described in my update. Basically the 100% width does not update automatically on mobile browsers, meaning that, if an element is wider than the default width of the browser, 100% width elements will be cut off. I solved this by adding:
min-width: 1200px;
where the 1200px is the width of the widest element on my page.
Remove the fixed width value in .menuContainer
FIDDLE
I made a website which displays correctly on desktop but on mobile devices I get a large white margin on the right side of the screen. I tried every solution I found so far, meaning the following basically:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
overflow-y: auto;
}
Tried every combination but the most I could get out of it is that I didnt have the margin but instead a vertical scrolllbar which isnt too good either. Could please someone help me with my issue?
You can see this problem here.
You should set also max-width: 100%;, or try to find element in your html code (using development tools in your browser) which has width property value higher than mobile screen resolution.
I found that the .menu2 class element have negative margin value. Setting this to 0, and changing width of .main element to 100% instead of value in ems solved this problem in my browser.
i'm currently trying to make an image resize depending on the browser dimensions. I've managed to get the image to resize horizontally, if I make the browser window narrow the image will resize proportionally just fine. However when I resize the window vertically, Firefox just doesn't seem to want to do it! The code is pretty simple
<body>
<div id="content">
<img src="images/abc.jpg">
</div>
</body>
and the CSS:
#content {
height: 100%;
padding: 50px;
}
#content img{
max-height:100%;
max-width: 100%;
}
Another issue is that the image does seem to resize vertically in chrome, but i have to drag the bottom of the browser well over the image before it start doing this. I'd rather the image start to rezise as soon as the bottom content padding "hits" the bottom of the image so to speak. Hope this is making sense.
Any help much appreciated
try this, taken from Twitter bootstrap 2
html,body{height:100%;}
#content {padding: 5%;}
#content img {
max-height: 100%;/* Part 1: Set a maxium relative to the parent */
width: auto\9;
/* IE7-8 need help adjusting responsive images */
max-width: auto;
/* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
Because height could potentially go on forever, you cant set the height of anything relative to the browser window to be a function of percent. What i'm saying is that you will need to put it inside of something with a fixed height to use a per-cent value. Good Luck!
-b
You've only specified the "max-height" and "max-width" properties.
If you don't specify the actual "width" or "height" properties, the image initialy takes the width and height of its physical dimensions (if not larger than the specified max-height and max-width).
Said that, the behaviour you've noticed, is correct.
The answer is, as already mentioned, to specify also a initial width or height property, dependig wether your image is portrait or landscape.
Is that what you want?
I actually just added a height to html and body, so that #contents height doesn't get to high.
body, html {
height: 100%;
margin: 0;
padding: 0;
}
(And box-sizing: border-box to #content, because it seems like you'd want that)