Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I recently made a website for a church. I used Foundation, SASS, and Compass. I've almost got it finished up when I notice that if you size the window down I get a horizontal scroll. So I add overflow-x: hidden; I thought that fixed it but when I tested it on my iPad I am still getting roughly 20px of padding on the right side. I then thought maybe it was from the box-shadow which made sense so I removed all the box shadows and its still there. Here is the link: http://www.jessefoutch.com/fumc/ any help would be appreciated.
Foundation already has its own set padding and margin for grid-columns and other grid elements. You can either change these parameters in the _settings.scss file in Foundation, or you can set the padding or margins to 0 manually and that should fix any of your issues. I checked and didn't actually see the issue you were speaking of however, so it may no longer be affecting your site
Perhaps you need to clear your cache. I have looked at the site in Firefox, Safari, and Chrome and only saw the standard browser scroll bar when I resized.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I have a problem that only occurs in firefox and I cannot find a fix for it so it would be great if someonw could help me on this.
I have this page: https://shorturl.at/rwR79
In there is a container which is 100% height. Which shows fine in chrome and Safari but in Firefox the container "orange box" has never the 100% height but stays small.
I cannot figure out what the problem is as its working on all other browsers.
Would be great if someone had an idea on this.
Thanks.
As I mentioned in my comment you can just use vh instead of %
But I have also another nice solution for you if you want to avoid vh units, in the main class just change the display from table to flex, that seems to be solving the issue nicely in firefox too :) , also you need to add justify-content: center; in the class to center everything horizontaly
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I've been looking through here and other forums, trying to fix this IE bug with no luck. Basically, the gray buttons below "FIND THE RIGHT TOOL" (using "cards" in Zurb Foundation, with the Flex grid) are displaying oddly in IE11--as if they have no width set:
http://www.mindtools.io
Here's how it's rendering in IE11: http://imgur.com/a/VwWIl
Any help would be greatly appreciated--thank you!
I can get the "cards" to be the right width by setting #find-a-prog to width 100% and .disorder to width: 100%. But there are other issues in my view of IE too, like the button bumping up into the cards and the #find-a-prog aligning to the right of the startchange div.
EDIT: corrected a mistake. Also I would suggest making the hero container display block and centering the items in it a different way, maybe with margin: 0 auto;
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 6 years ago.
Improve this question
I've seen many people suggesting setting *{ margin:0;padding:0;}. It does prevent lots of unexpected margin/padding on the page.
But if it's first thing we ought to implement every time we create a CSS file, why do the browsers bother to set default element margin/padding other than 0?
I guess giving a default margin makes sense to elements like <p> to keep the paragraph spacing. But again, if we are suggested to put the * reset every time, the browsers' default settings don't matter anyway, right?
There really is no exact answer to your question. But, the most logical reason to put a preset margin and padding is to most likely make webpages automatically more appealing to the user. If you see a website with text right up against the side of a page, it starts to look a little stretched and sketchy. So, to counter this, they set a margin and padding.
Bryce
A <h1> in example unfortunately has a browser-specific margins (see specific to the browsers). Setting margin/padding to 0px is a poor version of a normalizer that redesign all css to a clean cross-browser design from what you can start to write css that let the browsers render the same style.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm trying to take a template that was designed to be responsive and make it "unresponsive."
http://myhurlburt.com/NEW/bowling.php
The width of the page is set to 960px. When I view it on an iPad or iPhone, you have to scroll to the side to see the entire page. Do you know what in my CSS is causing that? I would like the entire site to "fit" into a browser so the user does not have to scroll to the side.
It's a big job to change an unresponsive site to a responsive one.
But you could try something like this to get started.. .wraper currently has it's width set to 960px.
.wraper{
width:100%;
max-width:960px;
}
use % for width, height and other margins. Use media queries also. If not, do zoom:1(2,3 or something);
Start by scaling the website with min/max widths and additionally use percentages instead of px.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Blogger has this new fancy theme that I see a lot of people using, but it seems to me to have an obvious CSS bug as the link gadget overlaps the scrollbar. Are you seeing this problem as well?
The gadget div has it's CSS set to right:0px and z-index:3000, which causes it to overlap the scrollbar on Chrome for Windows. I would think that browsers shouldn't allow overlapping of scrollbars in the first place? And if they would allow that, isn't it still a usability bug from Google?
UPDATE: Here is a link with a blog where this happens: http://www.judegomila.com/2012/10/how-to-name-your-company.html
And here is the same theme, but without that problem: http://googleblog.blogspot.jp/
you have set the overflow-y in the <div class="viewitem-inner"> remove this its on line no 1648
and try the
html {
height: 100%;
overflow: scroll;
}
also remove the position:fixed; from <div class="viewitem-panel"> on line no 1589
working
I would say this is a usability bug in the Blogger theme. A scrollbar always belongs to some element and elements can be overlapped with other elements – thus the scrollbars could get hidden.