I'm making my first site with gulp.
I'm working with a mobile menu. When I click it, I want it to translate to the right. It works fine.
The problem is that when it goes right it enlarges the whole site, I even tried with overflow:hidden but it didn't work. Among the others I also tried to make display:none, but it didn't work either.
Here you can see the problem:
Can anybody help please? Here is the link to the repo.
I think that it might be a zoom triggered by the browser. I can see that You are simulating the mobile view. That's probably the reason why it happens.
I've never tried that but i found something like this -> How to stop chrome responsive inspector from changing the zoom?
take a look :)
Simple workaround is to change transform: translateX(170px); to transform: translateY(-400px); on .page-nav with 840px breakpoint.
This is where the issue comes from.
Related
Trying to attain a near-exact cross-browser experience for our clients, lately, I've come to a problem that I can't fix. I've got the website up and running, and it's functioning smoothly on every and each browser, expect Mozilla Firefox. The problem that occurs in Firefox, is that I get to witness a broad white space on the right side of the site's main contents, and it is arising from my responsive css3 slider. The link below shows you 100% of the slider's codes, which works perfectly on jsfiddle;
Css Slider
but well, the problem is that each article tag is taking its space, even when it's hidden and not being displayed in Mozilla. So the more the slider comes toward the end of it, the less white space I get to see. The next upcoming slides are hidden, but however, they are still occupying a certain space, which forces a lot of vacuous area on the right side.
You can check the website itself at the link below;
My Website
Hoping that I have clearly stated the issue, what could be the possible solution for this matter ?!?
Adding overflow-x: hidden on the <html> tag seems to fix it. I'm not sure why, though. Hopefully someone has a better solution.
I'm having trouble getting m background images to show on mobile safari. Sometimes it works, sometimes not. Usually if I refresh the page everything shows the way I want, which makes it tricky to test. Always works fine on the desktop browsers I've tried.
Here is the site: https://www.shimmeo.com
I've tried replacing the shorthand background css tags with non-shorthand, as suggested by other answers, and no joy.
TIA!
this sounds as an issue with loading the picture which takes too much time. How big is the picture for start?
Hope yhis will help.
Thanks
I am developing website and have a strange bug that appears only on Chrome. I have a latest Chrome version and as I googled it seems to be old bug on older versions of Chrome(v18 - v20). Basically what happens: browser loads page, but on the bottom of the screen I have white spaces/rectangles instead of content or footer. Once I hover it - the rest of the content is loaded. Any ideas, links or solutions would be great.
I tried to work with this around with setting height to auto, but this didn't help. Also tried to load page in incognito to make sure it is not caused by any of the extensions I use, but this as well had no affect in resolving the issue.
Another solution that I think of is to set interval to re-trigger CSS in some milliseconds the page is loaded, but this is not the best solution and there should definitely be some other, more optimal, way to solve this.
P.S.:
All other browsers work like a charm.
Thanks in advance for the help.
In my case issue was with fade-in animation set on whole content. As website owner decided to skip the animation to save time. No further digging was done.
i have a question, where i hope someone can guide me.
I have made an homepage, and everything is working great, besides a few things that is miss placed in Firefox, and looks perfect in Chrome.
As well the site, looks abit weird on phones.
www.securehome.nu is the homepage.
Basic knowedge about the homepage
The site is created in Visual Studio
The site is build up around a MasterPage
Info about the problems
- The menu bar have some borders (the lines that splits each menu field from each other, those borders aint positionen the same place in firefox and chrome.
- On the phone, there is a white field in the bottom, even that the wrapper is height 100%, and it works smoothly on computer browsers.
I can easily put the whole site into a winrar document for download if someone wants to try play around with it, and help me what the problem is.
As i can see there is no problem with my both browser they are looking same and there is no responsive view for mobile of your site
I have an issue in a site that I've been working on, and it's only happening in Chrome.
After the page loads (link below), everything but the navigation bars and sponsors banner disappears. However, if I scroll down, things reappear the way they should be. Scroll back up, and they disappear again. I haven't been able to test this out in many other places, but I've tried it on at least one other computer (in Chrome) and the same thing happens. I was not the one who built the site originally, but I have been working on it for a while now and have a pretty good understanding of it. However I've never seen anything as weird as this. Other notes: Sometimes the whole background and content disappears, sometimes only portions of it. It's also really laggy, again only in Chrome.
I think this may be JavaScript related, but I don't know. Can anyone tell me why the page behaves this way? Maybe how to fix it? Why it only happens in Chrome? Help would be greatly appreciated.
Link: http://www.calpolysae.org/main/baja_media.php
Here are a couple screenshots too, to show the difference before and after scrolling down.
https://drive.google.com/folderview?id=0B7HP2Q5qXoqrTjdwMldBbzRDVm8&usp=sharing
start with fixing the error on page : "'jquery' with version '1.10.0' not found! "
afer that said,
i think it related to the width of that banner:
<img id="banner" style="position:relative; top:-300px; width: 430px; height:auto;display: block;" src="images/SAElogo.png">
try to make it smaller , set it to :
width: 300px;