Right-side of center-positioned div cut off on mobile - html

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

Related

Size of div changes from browser to browser?

Pretty simple problem here. Whenever I change browser windows the div on my code changes size. Inside the div is a list of links, in Chrome the div encapsulates all the links perfectly but in something like Firefox or Safari the div stops at about the second to last link. How do I make the div size equal across all browsers?
.test {
width: 420px;
height: 2270px;
border: 1px solid grey;
top: 50%;
background-color: whitesmoke;
position: relative;
align: center;
}
I'm guessing it has to do with how each browser interprets it, but I'm not exactly sure how to fix that.
Yes you can keep the div size fixed regarding different window size. But It depends on your need. If your div contains texts/image , you can use
overflow:hidden;
Again, Your div is getting so small for the smaller screens and thats your main concern, you can use
min-width: 200px;
In this case, even if the parent div gets smaller, child div will be the same unless the parent div becomes smaller than the child div.

Large images with overflow: hidden; don't get centered in Firefox

I'm trying to get rid of the horizontal scroll bar (A) but when I changed my footer my images got messed up (B) and I'm not sure what is happening or what to do.
A: Unwanted horizontal scroll: https://mabonzo.github.io/prj-rev-bwfs-tea-cozy/teacozy/
B: Commented out footer and the images go wonky: https://mabonzo.github.io/prj-rev-bwfs-tea-cozy-test/teacozy/
Initially I was trying to change my footer rule-set from having left: 20px; to margin-left: 20px; or padding-left: 20px; when I ran into this problem! I speculate that it is related to the actual resolutions of the images, but I'm not sure.
Resizing the browser fixes centers the images.
I asked on a Slack group to no avail, I just tested it on different browsers and it seems like this is an issue only on Firefox. On Chrome and Edge they load no problem... So I guess my updated question is how to fix this for Firefox users.
EDIT: going to update the website, so the problem won't be in the (A) link. But the TEST site (B) will still be up and broken. Thanks!
Your footer element has an auto width (which is the full width of the screen, because it's a block level element) but then you say left: 20px (combined with position:relative) so now it's the full width of the screen but it starts 20px from the left, meaning it will always be 20px off the right side of the screen.
padding-left:20px on the footer will accomplish the same goal and not cause the horizontal scrollbar.
Your images seem to be defaulting to the left on Firefox because you have position: absolute on .mission-child img. Setting this to position: relative seems to correctly centralise the images for me.
Your footer occupies the full width on the page, in addition to having left: 20px on it. This offsets from the left, leading it to have a total width of 100% + 20px. To offset the text contained within, but not the footer itself, you're looking for padding-left: 20px.
Hope this helps! :)
Firefox might just render position: absolute; images within display: flex; position: relative; justify-content: center; align-items: center; divs weird!
I fixed the problem by adding the align-self: flex-start; and top: 0; declarations to the .mission-child img and .locations-child img rule-sets.
Thank you for the help!

Image jumps out of div when browser is resized

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
}

White right margin on mobile devices

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.

CSS - My images are overlapping my text on a smaller screen size

On my website the images overlap my main content text when on a smaller screen size. At home it was perfectly fine because my screen is much bigger but now I'm at college and it looks horrible.
Is there anything I could do to fix this?
#content {
font-size:16px;
margin: 0 auto;
width: 955px;
}
Here is a picture of the problem:
http://i776.photobucket.com/albums/yy41/tom14431996/problem-1_zpsa410ef94.png
As you can see the image overlaps the text.
This is an example code of how my first image is added:
#imageholder1 {
float: left;
left: 2%;
position: fixed;
top: 11%;
border: double;
border-color: #333;
}
And this is my text code:
#content {
font-size:16px;
margin: 0 auto;
width: 955px;
}
First of all, don't position your images with position: fixed; for your current situation. position: fixed; is for keep an element fixed on the screen so that it never moves. When you view your images on a smaller screen, the text must move somewhere, so it overlaps the fixed images.
Try setting a width to your text's class/id of something like 50% so it adapts to your screen width. I can help further if I can see some more html/css.
Try position: relative; on your images as well.
position: fixed is putting the images over the text. Keep the images inline if you want to text to show around them.
This is happening because you're using position: fixed; - when you do that, the element takes up no space in the layout, and goes on top of statically positioned elements (the default). Your float: left; is doing nothing here, since you can't have an element that floats and is fixed position. You can either fix this by using margins and/or padding to ensure a minimum size, so that the fixed elements are always over top of the margins/padding. Or you can actually use float, which will make the content flow around the images.