I'm Working on a web site (http://www.iwanttobesanta.com/about_us.html) more specific on About Us/Quem Somos page, that seens to be diferente depending on browser. When window < 500px the navbar (navBar.css) get out of the place in google chrome, but it's seens fine in firefox. Any tips?
It is because of a media query for 500px width. (http://www.iwanttobesanta.com/css/stylesAboutUs.css)
the css for middleTextMob has margin top = 200px. This is causing the header to shift down.
Related
I have a slideshow on my homepage that scales to 100% width. It works perfectly on my computer (I can even resize my browser windows all the way down, in both Firefox and Safari, and it works great) but it doesn't work on my iphone (it stays too wide and adds a lot of blank space to the right of the page content).
The slideshow is an iframe. I've tried scaling the iframe with html, putting it in a div and scaling the div with css, and I've tried this: http://css-tricks.com/snippets/html/responsive-meta-tag/, but nothing seems to be working. Does anyone have any ideas I can try?
Thanks!!
website: www.silvervinedesign.com
You have pixel widths defined for the styles of this element. Therefore, it won't be responsive.
If you inspect the source of this iframe (right click and choose "Inspect Element"), you'll find that the <ul> element containing the images is getting a style="width: 4778px;" applied to it. Each <li> child is also getting an explicit pixel width style applied. When I view the source of the iframe, these style tags are not present there.
That tells me you've got some javascript function which is setting this width. Looking at your source, I'm guessing the plugin responsible is galleria, but it's hard to tell.
When I have the Chrome developer tools open and I resize my site, it neatly tells me the width.
My site is adding a horizontal scrollbar when it drops under 495px. This is odd since I need it to at least be responsive or elastic down to 480px.
I am using percentages for widths, so I'm struggling to find the CSS that's stopping the site from narrowing further.
This can happen if you have a min-width on the entire body element of 480px, perhaps to set the lower limit for phone screens, and the page content is long enough to add a vertical scroll-bar.
The vertical scroll-bar is not accounted for in Chrome's measurement and being 15px wide, the horizontal bar appears when the tool reads 495px since its actually 480 + 15px.
Arguably its a bug in Chrome, maybe its just the way it works. You're best off taking out the min-width anyway and just letting it flex down past 480px.
This is happening to you because the content width is bigger than 480px. It's the same when your page height is higher than your browser. Try css media-queries to set css styles according your browser width. (This is called responsive web)
Here is the link to the website I am talking about.
My problem is that when you navigate between the different pages in the main navigation, the main wrapper does not align on the different pages I have used. So if you are on the home page and you click on "WMH" in the main navigation bar the whole page jumps to the left by about 8px.
This creates a jitter between pages that my client really doesn't like. I used some padding-left and padding-right in css to align it correctly. Unfortunately when I get it pixel perfect in Firefox, it is wrong in Chrome and Safari. If I get it pixel perfect in chrome, it jitters in Firefox. This is very irritating. I don't want to have to write separate styles for Chrome, Firefox, IE, Safari unless it really is the only solution.
Thanks for your feedback.
Archie.
The browser scrollbar looks to be causing this. You can force a scrollbar to always appear which would solve the issue. Add this to your CSS:
html {overflow-y: scroll;}
You would also probably need to remove the padding that you tried to fix the problem with originally once the above style is in your CSS.
I'm building a site layout ( should be cross-browser ie7,8,9 and all the recent ones ) and everything was great until i tried to zoom in. When the scrollbars appear, the header's floated elements move out of its container ( so it seems ).
Currently the behaviour persists on every browser, and also the page is using a sticky footer so i can't really modify the main structure i guess.
Here is the page:
http://www.mindsinfusion.com/k/
Any ideas on how to fix this? Am i doing something terribly wrong ?
Thanks
Your #pageHeader & footer DIV's are defined for 100% width, which applies to the window. when you zoom, you're window effectively is getting smaller.
I tried adding a min-width: 1030px; to your css and it worked, in chrome & firefox, but it may not be fully cross-browser solution.
I'm currently redesigning a website and have run into an issue with horizontal scrolling when the page is viewed in a narrow browser window.
The header contains a logo, some text and a navigation bar and spans 100% of the page width, but the header content is centered with a fixed width of 940px. When shown properly, it looks like this:
However, if the browser window is resized to be narrower than the fixed width a horizontal scrollbar appears (as expected), but scrolling it 'cuts' the scrolled part out, producing the following result:
The work-in-progress site can be viewed live here, if the CSS/HTML can give you any hints as to what I'm doing wrong.
The easiest way to fix this problem is to add min-width:940px to the body tag and use an expression for ie6.
It works fine for me in Firefox 3.6.8, IE 8, and Chrome 5. What browser are you using? Looks like you are using Chrome.
Is the page being cached in your browser incorrectly? Try clearing your cache and then check the site, or try viewing it on another computer. The CSS for the header is straightforward and correct. Nothing there should be causing problems.