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;
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 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'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 6 years ago.
Improve this question
Working on https://faraz-manan-2apz.squarespace.com have a quick scroll through and come back (view as visitor and enter captcha)
Header image is meant to be fullscreen on all devices, which it is. good.
but I want the squares with the pictures (id="page") to start at the end of the header image, regardless of the viewing device.
I tried adding padding in different % but the gap between header and content looks weird.
Please help. Thanks
Change #header's height to 100vh so it will be the same as the viewport height. Then change #page's padding-top to calc(100vh + 50px) to push it to 50px below the viewport height.
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 7 years ago.
Improve this question
I am creating a dashboard and in the dashboard I got two boxes that I wanted have in the same level at the top. I am using the display "inline-block" to group them in boxes; however, the result is different instead the bottom part is in the same level but the top is not. See screenshot below:
https://www.mediafire.com/convkey/8e14/xdh672yojc8owe86g.jpg
I set the height of each box to "auto". You can see on the screenshot that the first box is not aligned equally to the second box, is there a way to have the two boxes in the same level or aligned equally at the top? I tried using table-cell display but it has compatibility issue on other browsers such as IE. Thanks
Use the verical-align: top; CSS property on the element which contains your inline-block elements. ;)