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
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 1 year ago.
Improve this question
On the mobile version of the website, you can scroll to the right to the navigation, which should actually only be accessible via click. How can this be changed?
(URL removed)
I have already tried many different solutions that I have found, but nothing works so far.
I am looking for help in this individual case.
Thank you very much :)
By moving your .main-nav element with transform to the right you extend width of the visible content, and since your scroll properties are default it will enable you to scroll the entire visible content, including that menu.
What you want to do is clip everything that is outside of your html or body element.
CSS
html {
overflow-x: hidden;
}
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'm seeing some crazy layouts sometimes. One of them is layout where we have boostrap container that has max width, let's say 1120px.
One of columns has 50% width of container, and the second has 50% width, not container but browser.
I've attached 2 screens to clarify my question - and the question is: does anybody has claver solution, that is responsive and will not break things during resisizing ?
So, 2 columns will not collapse ?
I will not provide html / css code, as i have no idea, how to code this right and without javascript.
If any of You have any ideas, i'm saying "thanks for a tip :)"
you can use width: calc() to calculate any width you want.
quick example
https://codepen.io/kupas/pen/Yepadv
PS: for smaller screen use mediaqueries
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 does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I've got a problem with long tag words (like Best Practices below).
I'd really appreciate if someone could go to the URL http://www.siliconvalley-codecamp.com/ and make specific recommendation for the correct CSS change that would get the words like "Best-Practices" to clip when it goes over the edge rather than just flood over the edge into the screen. Sadly, I'm not very good at css and general instructions will not do me much good since I'm not and don't have a css guy to help me.
It will be good for you karma and we will appreciate it very much.
If I add word-wrap:break-word to the .TagCloud element, the words effectively wrap to the next line. You don't need a fixed width, just adding the word wrap property should effectively work.
Another alternative would be FitText. It is a jQuery plugin that condenses the font size to always fit in the allotted space.
It works for me on Chrome ! Do you still have the problem?
By the way you should give a fixed width to your div TagCloud and maybe use this
http://www.impressivewebs.com/css-white-space/
or this
div.TagCloud {
width: 250px;
word-wrap: break-word;
}
Why not just add overflow: hidden to the box? If you just want it to clip.
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.