I was really inspired by the layout of this site http://sassandcompass.com/ which is said to be using Susy and I want to make the layout for my new website with the same idea. What I want to have is a layout which spans fully across the browser width but also at the same time stays responsive. I used 'fluid' container style in Susy but I don't know how to maintain the fixed gutter width. Here is my settings:
$total-columns: 4;
$column-width: 4em;
$gutter-width: 1em;
$container-style: fluid;
$tablet: 8;
$desktop: 12;
Could you please tell me what's wrong with my settings and what possible settings that site is using?
Thank you!
The site you linked to does not maintain a fixed gutter width. Susy 1 doesn't have any support for that, but Susy 2 (currently in alpha) does. You might be able to fake it in Susy 1 by setting gutters to 0, applying border-box box-sizing to all your grid elements, and then adding you gutters manually as padding.
Related
I am currently creating a responsive website. I noticed there is an issue with empty space on the right as you scrolling horizontally. I can remove the horizontal scroll by adding overflow-x: hidden. But it will not work on mobile devices such as iPhone and iPad.
So, I tried to add min-width because it will help to get rid of empty space. But I can't put min-width on full.css (e.g. min-width:1000px;) because it will set to full-width - see example below:
full.css
#wrapper {
width: 1000px;
margin: 0 auto;
}
responsive.css (less than 1000px)
#wrapper {
width: 100%;
margin: 0;
}
I was wondering if you know how to fix this issue? Let me know if you have a better option for it. Or should I create a new wrapper id?
Every now and then I have this problem, and a big part of solving the problem is identifying the element that's the culprit. I just came up with this little jQuery script you can run in your browser's JavaScript console to find which elements are wider than the body width, causing that annoying scrollbar to appear.
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
You Can hide the horizontal overflow using css code (and then the horizontal scroll bar will never show up again):
body{
overflow-x:hidden;
}
Link to the page? Chances are there is some kind of element inside the wrapper that is breaking past the browser window.
Often times it is with padding and widths. Keep in mind if you have an element inside the wrapper that is set to say 100% width and you add padding on the left and right of 20px. It will create a horizontal scrollbar because the element is 100% + 40 px.
So if you are building liquid elements inside a div you would do it like this:
#liquidelement {
width:96%;
padding:0 2%;
}
You need to subtract the padding from the widths, also always use percentages for the padding when doing layouts because it's fluid, not fixed.
Often times it's a matter of a single element which can cause the page to get the horizontal scrollbar. That can be a pain, but you can easily find out the offending element by this simple css trick
* {border:1px solid red}
You can also add the following properties if the element is hidden.
opacity: 1 ; visibility: visible;
Demo :https://codepen.io/i_abhi/pen/eYzpBjr
2020
If any of you using Boostrap and came across this question then here's the answer.
for Bootstrap Users
Wrap your .row with .container or .container-fluid and it will solve the issue.
Referring to your issue, the code appears to be correct. However, some elements inside might also affect the exact width and overflow your boundary. Might check all inside elements as well. You can use Firebug or Chrome Inspect Element.
No more than three steps are required here:
Scroll the horizontal bar to the right where you can see the extra empty padding.
Open an Inspect Element
This is done by holding ctrl + shift then pressing i
Scroll over all your elements, the element with the extra padding should protrude your pages content into that empty space created.
You can Use
#wrapper {
max-width:100%
width:100vw;
}
it work fine with me.
this is an old question and I know you found your answer
but I say this because I didn't see this anywhere else. maybe this help someone else.
if you use min-height in your CSS code, this causes a horizontal or maybe vertical useless scroll bar.
just delete it if it isn't important
There is an 8px margin on my body element that I don't want to have there because it makes the navigation look a bit strange. I can set the margin-top to be 0 pixels, or set a negative 8 px margin on the navigation, which is better and why does Susy have this in the template anyway?
This is not actually related to Susy at all. Susy does not apply any 8px margin to the body, but most browsers do by default. You can use a reset ("#import "compass/reset";" would be one way), or simply override the margin setting on the body by hand. I would not use negative margins to fix it, unless you really want 8px margins everywhere else.
So, I am designing with a fixed width. I just want the gutters to be flexible. So, I tried just using parent div's with 100% width. As you can see in this fiddle:
http://jsfiddle.net/P3Ckk/115/
What I intended was for what is happening with the fixed div ("nav" div) to happen. When the user window gets too small, I'd like the 100% width to collapse upon the fixed width elements (in this case, 1000px) and enable horizontal scrolling.
However, my parent width:100% does not work like that with relative positioning. The "top" "title" and "container" divs all stop at whereever the screen stops. I suppose that is 100% but it leaves the fixed width content overflowing these (now) smaller parent divs!
Additionally, the problem also shows up when a vertical scrollbar comes down. The area to the vertical scrollbar is considered 100% and the remaining gets left blank. This also creates a horizontal scrollbar to view this "extra" part.
What is the best solution here? Should I abandon my parent div 100% width approach?
I've tried making the these 100% divs have min-width:1000px, but that doesn't seem to work. I'm just a bit stumped here.
Any help appreciated. Thanks!
I've read about this before. Before you can use 100% in a div width you must set the css of both your body and html tags to 100%.
html,body{
width: 100%;
}
or else it will stop at the edge of the screen on any device.
I am looking of a good example for dynamic 3 columns layout like this one from Google Search. I have see, that if the layout fits to every browser resulution. That menas, there is never a scroller if the resulution is 800, 1024 or >1024 . What kind of solution, can I use to become such effect? I have see, that the center content is floating, but how is it possible to fit for every resolution and is there a minimum of the width of the center, because if the browser goes smaller and smaller, there is a point, where the scroller is coming.
It will be great if anyone can redirects me to an similar example, please! I am interested in centered design, not left oriented like Google!
There is one CSS feature..
Here it is Google HTML5 site, where included this feature... Just try to change width of browser and scrollbar will not appear.. because css file has styles like
#media only screen and (min-width: 641px) and (max-width: 800px) { /* styles */ }
i.e. for some resolution you have some other styles..
take a look they css
Have a look at the CSS float tutorial, which I refer to every time I want to do a multicolumn. http://css.maxdesign.com.au/floatutorial/
I have a CSS style which displays a png image in background. It works well in all browser, except in ie6.
In ie6 the bacground image is stretched to fit the block. How do I solve this ? Here's the CSS which I'm using to do this.
.error
{
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
}
IE7 / FF3.5
IE6
You probably use a png transparency fix script for IE6, I think the problem lies there because it probably applies a scale method.
Read the comments on this page.
The documentation of your png transparency fix will probably cover this.
I personally found using transparent pngs in IE 6.0 to be a major pain in the ass despite all the various fixes out there. I know this is not an original answer, but I would probably just do a conditional check and replace the image with a gif or jpg version if you really need to support IE 6.0 here, instead of relying on hacks to support this. Or just drop IE 6.0 already, this year, I've talked every single client into not supporting IE 6.0 on their new projects. Seriously, it's about damn time that thing stopped making our professional lives so god damn miserable.
If you're using the AlphaImageLoader filter, make sure sizingMethod='scale' is not present. Remove it or set it to image instead of scale.
Belatedpng is the best script I have found for this problem:
http://www.dillerdesign.com/experiment/DD_belatedPNG/
set actual width and height for the background image and background-position.
.error
{
color: #D8000C;
background-color: #FFBABA;
background-image: url('error.png');
background-position:left;
width:251px;
height:72px;
background-repeat:no-repeat;
}
here width and height are actual size of the error.png image. hope it helps.