I've got a Squarespace website & I'm trying to increase my site width on the SKYE template so the images & content only have a small bit of padding around. Here is the link to the site - password123. I've tried this but no luck:
#page { max-width: 1300px }
I'd like the space between the nav & main content closed up too but I'm struggling with that aswell. Sorry I'm not an expert at all (obviously) any help would really be appreciated!
This can be accomplished by using CSS, inserted via the CSS Editor, to override the default style. The following CSS will decrease the space between the header and body (the .site-header bit) and will decrease the space between the body and the edges of the browser (the .responsive-padding bits).
.site-header {
padding-top: 30px;
padding-bottom: 30px;
}
.responsive-padding--right {
padding-right: 30px !important;
}
.responsive-padding--left {
padding-left: 30px !important;
}
As an aside, you can still share a link to your site with others (even for sites in trial mode) but setting your site visibility to "Password Protected" and then providing that view-only password when you provide a link. You can always change the password later if you don't want people to be able to view it going forward.
Related
What’s the default margin that HTML sets for its <body> tag? I noticed that there’s some automatic margin, but I’m wondering if anyone knows how much it is (and whether it’s in px or %, etc.).
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.
If you want to change it, you can just do this:
body {
margin: 0px;
padding: 0px;
...
}
But if you have a large project and want to be more complete, use normalize.css. It resets a lot of default values to be consistent across browsers.
According to W3School's CSS reference,
the default properties and values for a body tag are,
body{ display : block; margin : 8px; }
And one can quickly get the computed details of any element by accessing the Computed Pane in the Chrome Dev tools.
css default values
https://www.w3schools.com/cssref/css_default_values.asp
body{ display : block; margin : 8px; }
* {
margin: 0;
padding: 0;
}
The body can also be reset using the asterix tag.
What’s the default margin that HTML sets for its <body> tag? I noticed that there’s some automatic margin, but I’m wondering if anyone knows how much it is (and whether it’s in px or %, etc.).
In most major browsers, the default margin is 8px on all sides. It is defined in pixels by the user-agent-stylesheet your browser provides.
Some browsers allow you to create and use your own user-agent-stylesheet, but if you are developing a website, I would recommend staying away from changing this, since your users most likely will not have a modified stylesheet and would then see a different page than you do.
If you want to change it, you can just do this:
body {
margin: 0px;
padding: 0px;
...
}
But if you have a large project and want to be more complete, use normalize.css. It resets a lot of default values to be consistent across browsers.
According to W3School's CSS reference,
the default properties and values for a body tag are,
body{ display : block; margin : 8px; }
And one can quickly get the computed details of any element by accessing the Computed Pane in the Chrome Dev tools.
css default values
https://www.w3schools.com/cssref/css_default_values.asp
body{ display : block; margin : 8px; }
* {
margin: 0;
padding: 0;
}
The body can also be reset using the asterix tag.
I use tlk chat integration, and I kept seeing 2 scrollbars only on Windows Firefox + IE.
tlk allow me to put a custom CSS to their chat.
I did some research and I've tried all of these below trying to prevent it, but none of them CSS seem to work. On top of my HTML file, I've added
//html, body {height:100% !important;}
// html { overflow-y: scroll !important ;}
// * html .clearfix { height: 1% !important; }
// html {overflow-y: hidden !important; }
Fiddle = https://jsfiddle.net/bheng/yrq93jyy/show/
If you view it on a Windows, you will see this like me
How can I debug this?
This has absolutely nothing to do with laravel nor PHP.
The element #tlkio has a CSS rule overflow: auto; which is differently interpreted by different browsers. To override it, you can do something like this:
#tlkio {overflow: hidden !important}
Ideally, you'd change the original rule without overriding it, but I assume you can't do it since it's a third-party integration.
Check it out: https://jsfiddle.net/yrq93jyy/1/
Newbie question. I'm trying to use a background image for my site which is built with Bootstrap.
I've added additional body CSS in a separate css file in my asset pipeline, and added a background-image:
body {
font-size: 16px;
padding-top: 10px;
background-image: url("../assets/back14.gif");
}
This changes the background fine but also applies it to other elements like nav units etc that I want to leave with default colours.
Can I fix this behaviour or apply the background in a better way?
Sorry to say, but I think you are correct: those backgrounds are transparent by default. As you can see from the Customize page, although there are variables for the backgrounds of active and hover links in the Navbar section, there is no variable for the background of plain old regular Navbar links. :/
Otherwise, not that hard of an override:
.nav-stacked > li > a {
background-color:#ffffff;
}
But still seems like something that should be in there as an option.
JSFiddle
This is driving me crazy. Can anyone tell me what I am missing here.
I have a word-press site I am trying to copy the design into an e-commerce skin
The wordpress site: http://solesu.clarityproductions.com/ and the
e-commerce skin i am working on is http://cspro.solesu.com/.
The words MAIN PAGE are slightly differently balanced from the wordpress site to the
e-commerce skin and I cant figure it out. Can anyone help me where the problem
is and what css change may need to be made. I have been looking a this for hours.
It looks like the background padding or height or something is a little taller
on top and bottom on the wordpress site but im not sure whats controlling this.
It seems that there is a quite a few differences in the code. Have you tried using Firebug for Firefox or the Webkit Developer Tools to inspect the page elements for differences?
After a quick look I can see that your missing elements and other stuff is going on.
This is what you have on line 54 in your styles.css:
.sidebox-categories-wrapper ul li a, x:-webkit-any-link, x:default {
padding-bottom: 3px;
}
It's the padding-bottom: 3px; that expands the height of the anchor tag.
Remove it, and you'll be fine.
This is the style giving you the issue
.sidebox-categories-wrapper ul li a, x:-webkit-any-link, x:default {
padding-bottom: 3px;
}
just make sure you overwrite it
#vmenu_8 a {
padding-bottom: 0;
}
And it'll be fine.