just a quickie...i am trying to change the colour of certain backgrounds within bootstrap.
i have removed the main background colour from the bootstrap css. So i am able to add my own. i have created a div with content and i want that background to be a different colour to the rest of the page. so assigning the background color to that div.
but its still white, even though i have removed the default background colour from the bootstrap
this is now the default body css for bootstrap
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 20px;
color: #333333;
}
any ideas?
here is an an example of what I'm trying to say. even though i have added a id its not showing up
Think i have found the issue, but have no idea how or why they are here....most of my style sheets are in the 'other' folder??? any ideas why or how this happened?
Are you sure that main.css is being loaded? Is it listed in Chrome's Resources tab? If it is, is the latest footer definition in there? Your screenshot suggests that none of the footer properties are being applied, not just the BG colour.
Since the inspector screenshot references a copy of bootstrap.css that's on your production server I'm wondering if you're also loading this copy of your main.css file.
Related
I have a problem with certain CSS applied to my website. I use some CSS to set the color, size and alignment of text. It works fine on the desktop browser, everything looks how it is supposed to be. The problem happens only when I load the page on my android chrome. At certain times it shows the CSS properly, but after I refresh it, the text becomes much smaller. Yet, some other text on the page that uses the exact same CSS does not change at all.
Note that the following CSS property is only applied to a mobile phone screen size. I use the CSS Media Queries to do so.
Here's the CSS I am applying:
.list {
color: white;
padding: none;
display: block;
margin-left: 0px;
margin-right: 10px;
text-align: left;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size: 100%;
}
It also happens with some other CSS on the page. It keeps on changing upon refreshing the page.
Added information:
This is what it is suppose to look like.
This is how it looks like most of the time.
Both list uses the exact same CSS properties.
Please do provide me with some help. Thank you.
The main reason is that you are using % try rem. You may need to do mobile queries for font sizes on other screen types.
font-size: 100%;
change to:
font-size: 1.8rem;
This could be too big
Because you're using a percentage for font size, it's based on the size of the parent container. A better approach is to use rem or px. Here's a nice article explaining all of your options
I am trying to rebuild this website in Polymer: http://qprogrammers-mockup.webflow.io/. So I can extend it easily in the future. I have everything down and I am using the same font, font-weight, font-size and I checked this with a chrome extension whatfont?.
But the fonts seems different. The example website is still much sharper. I read the css, but I cannot find out why. I also added:
body {
background-color: e8e8e8;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing:grayscale;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
Given your example, I cannot tell how much more CSS you have. But this may just be a case of you not invoking the webfont Open Sans and your browser is reverting to whichever sans-serif it is using. You could add the following line to the top of your CSS and see if it makes a difference:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
Finally, you are missing a '#' on your background color property:
background-color: #e8e8e8;
I'm working on a responsive site. After viewing it on a device running iOS5, I notice that all my h2 tags seem to display twice, one on top of the other. I checked it on a device with iOS6 and it looks better, but not on the iOS5. However, when I change my h2 tags to spans (changing them to display: inline-block) it seems to work fine as well.
I'm not doing anything seemingly out of the ordinary with my HTML or CSS, and I'm also not using a z-index anywhere in the document so would anyone have an idea what is happening?
<h2>Hello</h2>
h2 {
display: block;
font-family: "Segoe UI Light";
font-size: 36px;
color: #C41230;
}
Seems your problem could be a font weight rendering bug. It might be inheriting bold styling. See this SO post. You could try setting your font weight to normal for h1, h2, etc.
I'm using the bootstrap affix js plugin and it works great. The problem I'm having is when I change the body to use a custom font (Google: Lato) it throws the anchor positions completely off.
The affix links lead to bad positions on the page and the page no longer lines up with the affix sidebar when scrolling. It's always off by 100px or so.
ie.
body { font-family: 'Lato', helvetica, arial, sans-serif; color: #221e1e; font-weight: 300; line-height: 150%; }
I'm sure there's another way to compensate for the new smaller font or line-height, but I haven't found it.
If I raise the line-height on the entire body to say 300, it works ok, except that the spacing is horrible. So I tried to adjust the line height on only the titles holding the anchors.
h2 .mw-headline { line-height: 330%; }
And it almost works, except it's still off on the first link and it feels kind of hackish. I'm sure there's a proper way to handle this, I'm just not sure what that is.
You can probably fix this using Bootstrap's custom variables if you're using less or sass.
In your case it'd something like:
#baseFontFamily: 'Lato', helvetica, arial, sans-serif;
#textColor: #221e1e;
#baseLineHeight: 20px;
Find more variables here: http://twitter.github.com/bootstrap/customize.html
Here's a live demo of the issue on JS Fiddle. I have some jquery UI radio buttons, and by setting the font-family on the body element, suddenly spaces appear between the buttonset, ruining the appearance and connectivity of the buttons. They look like this:
Update: the bug is now happening in all browsers, though slightly different in each browser. In all cases the font-family attribute is the problem.
I included some minimum CSS/HTML from my site that causes the issue, the Themeroller CSS for my site. You can mess with the fiddle and you'll see the gaps disappear when the font-family tag is removed from the body tag. Note it doesn't have to be a body tag, it happens if you make it a div or anything else that applies to the radio buttons.
This one bit of CSS is enough to break it:
body{
font-family: Verdana, Helvetica, Arial, sans-serif;
}
Is there any way I can specify the font family for the parent elements without the jquery UI buttons breaking? Interestingly this font-family isn't being used, as the Jquery UI theme's CSS sets the radio button's font as well.
I couldn't tell you why it does it, but if you are happy just to add CSS code that fixes it then use this:
#radio input, #radio label {
float: left;
margin-right: 0px;
}
Edit
In response to your comment below - try adding !important to margin-right; it looks like it is being over-ridden.
#radio input, #radio label {
float: left;
margin-right: 0px !important;
}
JS Fiddle - http://jsfiddle.net/kwpGn/7/