blank space on right side of website, culprit is not visible - html

My website has blank space to the right of it almost as if a margin was added to the site. The site content stretches 100% across the site and looks good, but if you scroll to the right you will see the space whether you are on a desktop or mobile.
This is such an age old question which I have also encountered in the past, but in this specific scenario, I can not seem to figure out what is causing the extra space and or why it behaves the way it does.
Thanks for any suggestions!

This block of code is causing the issue:
.hentry:after {
background: rgba(0,0,0,0);
display: block;
position: relative;
left: -5.1%;
width: 110.2%;
height: 1px;
}
Set the width to 100% or less. Good luck!

Just simple add this in css file.
body { overflow-x: hidden; }

Related

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!

Scroll bars never appear when re-sizing web page

so I made a website but for some reason no matter what I do, I cannot get any scrollbars to appear when the page is too small. I've been looking for quite some time but can't find a solution. I've tried many things but can't figure it out for the life of me. I suspect it has something to do with overflow but even adjusting that doesn't seem to work. If anybody could help me diagnose this, I'd really appreciate it. I'll go ahead and link the relevant codes below. I know it's probably a simple problem, but I'm about to rip my hair out trying to figure it out. Thank you for any help, I really appreciate it.
Main index page: http://pastebin.com/TkdzdKbG
CSS Style: http://pastebin.com/tMKQtC6v
Apply this CSS
.ibg-bg {
height: 100% !important;
position: absolute;
}
Remove position
.bg {
height: 100%;
/*position: absolute;*/
width: 100%;
z-index: 0;
}
I'm not sure if it's the solution you're looking for but in your "container" div, there's an inline style "overflow:hidden", if you remove that, you can get scrollbars whenever the page is too small.
http://prntscr.com/8pcd0f
I think this is because of overflow property. Try this on your stylesheet,
.container .bg {
overflow:scroll !important;
}
Most of your contents are under div.bg > div.display but the height of the parent node-div.bg- is 100% and its overflow value is set hidden by one of the scripts. (query.interactive_bg.js, I guess)
You can set the height of div.display to 100% and its overflow-y value to scroll to scroll the contents or if you want a horizontal scroll bar as well, change overflow-y to overflow.
Add these line to your style.css file, line 172:
.display{
position: relative;
height: 100%; /* Added */
overflow-y: scroll; /* Added */
}

Sticky-Footer for jQueryMobile

The best way to describe what I'm looking for is the thread below.
Make div stay at bottom of page's content all the time even when there are scrollbars
The difference is I want a footer like stackoverflow at the bottom but using the jQueryMobile framework. Is this possible?
I've tried the techniques in the other thread successfully for sites not using the framework, but I think the framework forces divs into absolute position and it gets really messy and I'm not sure the best way to do this?
Any help is appreciated.
I found the answer to my question.
[data-role=page] {
min-height: 100%;
position: relative;
}
[data-role=content] {
margin-bottom: 80px; /* based on how tall your footer is and how much gap you want */
}
[data-role=footer] {
position: absolute;
bottom: 0;
width: 100%;
height: 60px /* this can be configurable, or omitted, as long as the above padding-bottom is at least as much as the height of the footer is */
padding-bottom:60px;
}
I did a variation of the answer I found by Nick here: Jquery Mobile Sticky Footer
What I changed was to use margin instead of padding so that the content didn't increase in size when there was no need for it to.

Issues with pointer-events and z-index

I've been tearing my hair out for a while now trying to figure out why I can't click the links in my footer. I know my css is a bit sloppy, but it gets the job done. There's probably a lot more efficient way to get the effect of a footer that sticks to the bottom of the page that appears behind all the rest of my content, but this is what I have so far:
here's my jsfiddle of my issue
it looks a bit messed up in the jsfiddle, but the idea is thereI have a pointer-event:none here:
.bottomdivtransparent {
pointer-events: none;
width: 100%;
top: 0px;
height: 300px;
left: 0;
overflow: hidden;
opacity: 0;
}
Which should make it so I can click the links, but they remain unclickable! I'm sure the error is something really simple and staring me right in the face..
Any suggestions? Or any easier way to get the footer to appear behind all of my content but still extend about ~300px below everything?
Thank you!
edit: Thanks to Kasyx and Andrea Ligios for the help -- they have determined that it works fine in Firefox but not in Google Chrome for some reason. The margin-bottom property is messing up on .bottomdiv..
As i noticed in comment pointer-events will not work in this case. But instead of it ill suggesting you to add margin-bottom to your div like in fiddle: http://jsfiddle.net/auFeV/6/
.bottomdiv {
//(...)
margin-bottom: 310px;
//(...)
}
(Thank you #Andrea Ligios for improving this answer)

Force whitespace to appear between fixed-width div and the right side of page

I have a question for the front-end web development experts out there which is stumping me.
On my page, I have a sidebar which is fixed on the right side of the page, and then a large block of content (fixed-width) that takes up more than the width of the browser window. The problem is, the content on the far right side of the div can't be seen because it's behind the fixed sidebar.
Here is a super stripped down example of my issue in jsFiddle.
EDIT: Here is a more complete example of my issue.
I thought that simply applying padding-right: "width of sidebar"px to either the body or to a wrapper div, or applying margin-right: "width of sidebar"px to the content div should fix the issue, but neither works. I don't want to resort to putting in a filler div unless there is no way to accomplish this effect with CSS.
I did a search for the issue on google and so, but all I found were questions about how to remove whitespace from the right side, which is the opposite of what I want to do.
Thanks to anyone who can solve this stumper!
EDIT: After seeing a multiple questions about why I can't simply set things up differently, I thought I'd clarify by showing a more in-depth example of what I'm trying to accomplish. You can see that here. The columns in the table must be fixed-width, and I want to be able to see the full contents of the last column. Hope that helps clarify things!
I know you already came up with a jquery solution, but I think you could get by with a simple css rule:
tr td:last-child { padding-right: 100px; }
It just sets padding on the last td in each tr, equal to the fixed right sidebar width.
I made the wrapper position absolute with a left 0 and right of 110px, which you also can put on the content div instead of the wrapper. Just to give you a hint... See http://jsfiddle.net/aHKU5/98/
#wrapper {
position: absolute;
left: 0px; right:110px;
border: 1px solid red;
}
Edit
I also create a version with a max-width that makes sure the content will never exceed 900px, but if there is less room it will respect the sidebar as well... http://jsfiddle.net/aHKU5/102/
#wrapper {
position: absolute;
left: 0px;
max-width: 900px;
margin-right: 110px;
border: 1px solid red;
}
I know you wanted fixed width, but this works how you want I believe without worrying about user screen resolution. I just added float:right and width:100%; to the content div and it looks good to me. Try this code:
#content {
border: 1px solid #444;
background: #aaa;
height: 400px;
width: 100%;
float:right;
}
So I figured out a solution to my issue. I simply used jQuery to set the width of the body to the width of the table plus the width of the right sidebar. Worked like a charm.
Here's the code I used if future developers stumble upon this page with the same question:
$('body').css('width', $('table').width() + 150 + 'px');
Where 150 is the width of the sidebar.