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.
Related
I developed different responsive boxes for the news in the website I'm working in. And everything seems to be working fine except for the news inside the slider on the top of the main content. It displays properly in Chrome, Opera and even in Internet Explorer, but not in Firefox. The problem seems to be in the article elements, specifically in the following lines of CSS code:
.home .first-level-post {
margin: 0px;
width: 100%;
padding-top: 45.1613%;
}
It's supposed to have a height of 280px, that's why I chose 45.1613% as its value. The container's width is of 620px, and it's 45.1613% is 280px.
When I switch the padding-top property off, it takes the 93.3333% value which belongs to the article elements present outside the slider (which are 300px wide), displaying as it should, but that value does not work in the other browsers.
I've been dealing with this for a while I can't seem to find a solution.
You can properly check this issue right here.
Thanks in advance, guys :)
Firefox is interpreting your padding based on a height of 0 due to inheriting from your .home article class.
Changing your CSS to this seemed to fix the issue for me in Firefox and not have an adverse effect in Chrome:
.home .first-level-post {
height: 100%;
margin: 0;
padding-top: 45.1613%;
width: 100%;
}
I'm fairly new to CSS responsive coding. I've used a premade boostrap template and modified it. Its working fine. The only issue is when this website is viewed on Firefox responsive design tool at different size a mysterious white space appears after the footer.
Check the screenshot below for the mysterious white space being shown when i try to view the webpage on Firefox responsive design tool at: 768x1024 . How do we remove or hide this extra space ? I have tried; overflow:hidden; but its not working. Check this Website Link for the online version of the page
Please check the image screenshot.
That space is due to the site not being 'long or tall enough' for that specific device. You can fix it by instead of using height:auto on your .wrapper element, use height:100vh.
.wrapper {
min-height: 100%;
height: 100vh !important;
margin: 0px auto -155px;
border: 1px solid #F00;
}
100vh will get the vertical height of the specific viewport that it is being used on so it will always take up the screen.
Here is a little more on Vertical Viewport Heights
Hope this helps!
It is your footer element which is at the bottom of the page.
.footer, .push {
height: 155px;
}
Also, your fix is a greasy on and won't work always:
.wrapper {
margin: 0 auto -155px;
}
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 have a responsive site I am working on. It has a gap of white space on the right side of the screen at screen sizes roughly below 767px. This is the point it goes to the "mobile" layout. I had the same issue on the desktop size and fixed it by setting the footer to 99% width and it fixed the issue on the larger screen sizes. I tried playing with the footer width for the mobile size, but with no luck.
I have not idea what is causing this white space on the right side of the screen on smaller viewports. I tried the inspect tool in the console, but I couldn't find the problem.
I would post code, but seeing as I can't track the problem down, I wouldn't know what to post.
URL of page: http://sevenclanscasino.designangler.com/warroad/warroad-home
For anyone with a similar issue and struggling by hovering over elements in devtools, I came across this trick on another forum.
* { border: 1px solid red !important; }
This very very helpfully shows you all the boundaries in your project. In my case it was a grid overflowing its parent. Enjoy!
Try to change some elements into your css.
.row { margin-left: 0; margin-right: 0; }
header #top-nav-container #top-nav { width: 100%; }
header #top-nav-container #top-nav { margin-left: 0; }
another way (but please dont do that) :
body { overflow: hidden; }
When working on a responsive website, you should always set width values in % rather than px. So try setting with:100%
Hope this helps.