I've been working on a personal website for a class project. I've come across some bugs in it that I can't seem to get fixed. You can find the website at bnb.im or at CodePen (the codepen is mostly copy and paste; I did the best I could with it).
So, the first problem is the white space to the right of the screen. I can't tell what's causing it--when I use the Select element feature on FF, it just selects <html>. I asked on another site, and someone said that it was caused by the animation of the portfolio items sliding in--I tried the fix they suggested, adding overflow: hidden; to body, but it didn't work (the page became unscrollable). I also tried making the portfolio items smaller (45% instead of 50%), but that didn't help, either. Any ideas?
The second problem is with the portfolio items and/or the social section. Whenever I try to add margin-top or margin-bottom to put some white space between the last portfolio item and the social section, nothing happens for the most part. The only time I've gotten it to work is when I put the margin-top on the social section to 200%, but it was too much so that won't work. Any ideas with this one?
Thanks a lot--I really appreciate you taking the time to read through this and (hopefully!) look at my site.
The first problem looks fixed to me? Did you figure it out?
The second one take off height:100%;from .portfolio
Related
I'm working on a site, http://six03.com/ART which is currently in development. I thought I had everything all wrapped up for deployment until I had gone back in 320x480 mode on mobile and none of the links on the slideout menu do not work on any mobile device I have tested, at any resolution, on any page.
I have updated and reverted back to a working copy of jQuery, I have tried z-index:1; I have thought of all I could and researched all I could with no avail. Now I am asking for some help here.
I'll do some research in here as well to see if there are any similar problems, or if anyone knows of a thread similar to this, a point in that direction would be greatly appreciated also. Thanks.
I'm going to assume that you mean only the 'testimonials' and 'contact' links in the menu don't work, on the homepage only.
If this is the case, your problem has nothing to do with jQuery.
Your .region element is also positioned, and so it is being rendered over the menu.
Setting nav {z-index: 1} and .region {z-index: 0} should fix the problem, as it will bring the menu over the other positioned content.
I ended up getting rid of the repetitive icon that I had in the menu, I didn't need it, placed a z-index: 1; on the nav container. I also changed the positioning of the menu-icon to relative instead of fixed and that fixed the problem in the mobile devices I have been able to test in.
unless this was a design feature, the hamburger icon is no longer on the top left and in the hero image when the desktop browser is scaled to narrow width.
I updated my site to wordpress 3.8 and along with that came a weird jump when filtering the portfolio. inspecting this with chrome, it is very hard to see what exactly is going on. margins, padding, etc. are not being changed nor are elements being inserted. Other than this the effect/transition functions fine, and display correctly before and after the transition.
you can visit the page here to see the effect.FYI I already took a look at this link and this isn't the issue.
Thank you in advance.
EDIT:
This only seems to be happening in Chrome
just add overflow:hidden to li
First off, please excuse my English as it is not my first language.
I have encountered a very weird issue in an online store I am working on. It only happens in Chrome and I simply couldn't figure out what's going on and it's driving me crazy :(
This is the website I am talking about:
heavenlynature.co.nz
To replicate the issue (please bear with me), you need to add a couple of individual items to the shopping cart (at least 2 different items, then click the shopping cart icon (heavenlynature.co.nz/cart), shrink the browser viewport just below the first line of item, like the image below:
http://francisthedesigner.co.nz/images/test/2.png
Then drag the scroll bar downwards, you will find a block of div blocking over the top of the text/image (please try refreshing until the issue appears as sometimes it appears to be loading correctly), like the image below:
http://francisthedesigner.co.nz/images/test/3.png
But as soon as you highlight the page or hover over the div it just disappears. Now this only happens in Chrome and Firefox doesn't seem to replicate this issue.
It seems to happen only in the checkout screens, really losing it trying to make this work, any help will be greatly appreciated :)
Unfortunately even after following your instructions i couldn't replicate your issue. Can you please try to go on your Chrome under Tools/Extensions and disable them all?
Can you also try to replicate this issue from an other computer?
I have way too much padding at the bottom of my page and I have no idea why it is there. I have looked at Firebug in Firefox, but can't seem to find out which element is causing the extra padding. I know it will be really stupid, but I can't for the life of me figure it out. Thanks for helping out!
The site can be found by clicking here.
EDIT:
I just realized that this is an issue specific to Firefox. It looks like I would expect when I load the page in Safari. Any idea why Firefox would render the page with an extra 200 or so pixels at the bottom of the page (which causes the browser to have scroll bars when the page doesn't require them).
Thanks for the suggestions already given!
Check line 1197 of your stylesheet (styles.css).
The height of div.bottomLineContainer is being set to 200px. Try changing the value to 100px instead.
I just looked at the site. Remove
.cf:before, .cf:after {
content: "";
display: table;
}
It's on line 1361. If you turn off either property the extra space goes away. To find it I just methodically deleted each piece of html in firebug until the culprit was found, then started turning off properties one by one.
Nice site.
I would check the extra DIV statement you have listed below the contact us banner. Try removing them and see what happens. I will check on my end in the meantime.
It's your shadowbox which is causing the extra space, i tried loading the page without it and there was no extra padding on the bottom. Check documentation for the shadowbox.
A simple mobile landing page located here: http://happyappe.com/mms_Mobi
Not sure why, but when the About Us and Products pages are expanded the animation jumps past a certain point. Could anyone give me an idea as to why? Not all too familiar working with javascript.
Appreciate it.
I believe this is due to a known bug and the current workaround is to specify a solid width for the animated element. I tried setting one of your collapsible divs to 280px and the animation smoothed immediately.
Edit: Found what appears to be the bug ticket related to this issue
http://bugs.jquery.com/ticket/8370
The ticket has been closed and can't be fixed, the comment at the end reads:
Unfortunately there's not really anything that we can do on our end to divine the right height. Setting the width (as previously mentioned) will achieve the correct result - I recommend doing that in your scripts.