Hi I have looked at several stackoverflow questions on how to remove white space from a webpage (see selection below) but noone of the solutions given had any difference for me. The werid thing is that the whitespace only shows up when I look at my site on my mobile. The site in question is: http://moduleplanner.github.io/ and its corresponding github repo is: https://github.com/Moduleplanner/Moduleplanner.github.io
Thanks for the help. :)
Huge White Space At Bottom Of Page
Eliminating white space at bottom of page
CSS White Space At Bottom of Page
Strange space at bottom of page on iOS
current state of whitespace
It's your CSS on the .degree element, specifically the absolute positioning. For mobile, change the css to the following;
#media only screen and (max-width: 640px){
.degree{
min-width: 100%;
left: 0;
right: 0;
}
}
Or, even better, the following;
#media only screen and (max-width: 640px){
.degree{
min-width: 100%;
position: static;
}
}
Update
#media only screen and (max-width: 640px){
.degree{
min-width: 100%;
position: static;
}
.div.degree div.course{
width: auto;
max-width: 100%;
}
}
Related
I have a problem with my navbar. I'm using Bootstrap for a responsive navbar but it overflows on the mobile version of my site. I used overflow-x: hidden on body and it solved the problem for larger versions but not the mobile version. I've checked for margin/padding issues on all my elements in the navbar but can't seem to find the problem. You can see the issue on www.tcbarringerphotography.com on the right hand side if you view it smaller than 500ish pixels. Any ideas?
Your problem is with width of two classes that you are using in your footer
social-media
blog-posts-link
#media only screen and (max-width: 1040px) {
.social-media {
width: 100%;
}
.blog-posts-links {
width: 100%;
}
}
Reduce the width to 90% at media screen max-width: 576px;
#media only screen and (max-width: 576px) {
.social-media {
width: 90%;
}
.blog-posts-links {
width: 90%;
}
}
mark as answer if it works thank you ;-)
I have a website: www.ribbonhill.co.uk
I have been trying to remove a white space on the right, which appears on mobile phone.
Strangely it doesn't appear on full mode on both Chrome and Edge browsers, but when it is resized small the problem only appears on Edge but not on Chrome.
The site was built using Django-oscar and itself didn't have any issues.
I have tried removing two CSS files and there is no white space. These two files are ribbonhill.css and w3.css.
By removing w3.css there is only a small white space but removing ribbomhill.css leaves a large space.
I have been trying to remove a few codes but struggling.
I have tried
#media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
html,
body{
width:100%;
overflow-x:hidden;
}
}
And
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
But still no luck.
Update:
Sorted on mobile phones and chrome but edge / internet explorer showing below?! I guess I will just leave it as it is
I have analyzed your webiste www.ribbonhill.co.uk. Its a small CSS mismatch .
Inside the navbar remove the min-width: 400px; for your site logo and width:80% its not a vaild input value.
Change your CSS as follow:
.logo {
margin-left: 50%;
transform: translateX(-50%);
min-width: auto !important; }
Remove the padding: 2rem 0 0; for your .footer class. because its affecting the container padding.
It should be like that:
.footer, footer {padding-top: 20rem;margin-bottom: 0rem; }
I am making a webpage. I am the first to admit my CSS skills are not the best.
There is blank space appearing to the right side of the mobile version page. (www.perfectshinesmile.com)
Your container is not picking up margin:0 auto in mobile css.
So replace from main.css at line number 2638
#media only screen and (max-width: 641px)
.container {
max-width: 360px;
margin: 0 0;
}
to
#media only screen and (max-width: 641px)
.container {
max-width: 360px;
margin: 0 auto;
}
Hope this will help :)
your .container has set max-width property to 360px. Change it to max-width: none. But I reccomend you to your bootsrap grid for web layout, you would avoid such a problems. I can see in your code that a lot of elements has specific width value, resulting to broken layout on mobile devices.
In your case you have a second scroll bar!
or you do this
::-webkit-scrollbar {display:none !important;}
Or you do this
#media only screen and (max-width: 641px){
.section {
min-height: auto;
width: 360px;
overflow: visible;
}
}
Don't use the overflow:scroll; ever unless you need it! especially in phones port!
"overflow-x: hidden !important;" was causing an issue where the browsers side bar was getting cut off (overlapped). Removing this fixed that error, however, one and only one of the pages Header is running off the screen when viewing in mobile. Here is the code, changing the position from fixed to absolute fixes the issue but i need the header to be fixed. In Desktop view, everything is fine. only in mobile and only on one page. Its strange. Here is the code responsible for the size of the screen i am having issues with.
#media screen and (min-width: 321px) and (max-width: 759px){
.navbar-mj{
position: fixed;
width: 100%;
top: 0px;
z-index: 89;
background-color:#6782af;
margin-bottom: 0;
}
}
It's a little difficult to tell what your issue is without seeing a more complete example but what if you remove the width: 100% and then add right: 0 and left: 0?
try lower the (max-width: 500px);
it may help you instead of overflow the screen of the mobile view.
thanks
I have a really bizarre issue that I just recently noticed
I'm working on a wordpress theme for a friend, and I'm using relative/absolute positions to add social/connect buttons on the side of some divs -- Which works fine to get the proper design.
The issue, however, arises on the "Social" div that is on the right side of the page.
If the browser is smaller than the main content's size, it adds extra white-space to the right side of page. If I move the div to the left side, it's fine; it only adds the whitespace at about half the page length (which is more confusing).
I can't for the life of me figure out why this is happening; I can't figure out if it's a standard behavior, or an issue I created on my own.
I was hoping perhaps someone here might have had similar experiences, or just an idea how to fix it.
The CSS for the #social div is:
#social{
width: 90px; height: 250px;
padding: 10px;
position: absolute; right: -40px; top: 40px;
background: #EFEFEF;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);}
The CSS for the #page-content div it resides in is:
#page-content{
clear: both;
min-height: 500px;
width: 870px;
margin: 0 auto;
padding: 20px 0;
position: relative;
border: 5px solid #FFF;
background: #F2F0D7;}
And the screenshot is:
The width up there only exists if the browser's width is less than 960px (the width of the content)
After viewing your site, it looks like it's your social pannel. Some of the generated elements are 100px or more wide. If you remove the width:90px;, you can see the width it's trying to achieve. You could wither amend those elements and set their widths smaller (or to 100% or whatnot), or you could apply overflow: hidden; to the #social div:
#social {
...
overflow:hidden;
}
The reason why this is occurring is because you have overflow out of your social container. It only happens on the right because those elements are left aligned. (you could also align the elements to the right I suppose.)
Hopefully that helps.
As far as I have understood - You want your template to be responsive . For that you need to write media queries to cater various media sizes and resolutions .
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
write css styling for the different sizes and you can make you website look the way you want .