EDITED::::: Have simplified trying to figure out what the problem is. Below is what I currently have:
Inspect element(portion with .navbar):
#media (min-width: 768px)
.navbar {
border-radius: 4px;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 1px solid transparent;
}
localhost/media="all"
.navbar {
border-radius: 0px;
font-size: 16px;
padding-left: 150px;
padding-right: 150px;
margin: 0px;
background-color: white;
}
Text editor, I have this both in my pages.css.scss & my application.css.scss
#import 'bootstrap';
.navbar {
padding-top: 50px;
}
The inspect element is not picking up this change in the in padding-top at all. Also my application.css.scss says CSS at the bottom right while my pages.css.scss says Sass in the bottom right may this be the problem?
That is not CSS you are editing but a file with a SCSS extension . i.e. Sass. But in the bottom right corner you are editing it as a CSS file...click this to change it to Sass. (If you have installed Sass in the package manager)
The question is though do you know this is a Sass file or where you just hoping to create a CSS file?
Alright, if you want to enforce your "striked through" styles, you can use the !important declaration. Such as:
.navbar {
border-radius: 0px !important;
font-size: 16px;
padding-left: 150px;
padding-right: 150px;
margin: 0px;
background-color: white !important;
}
Watch out for media queries that Boostrap uses all over the place though .. especially for important components like the navbar. It will affect the style for all screen width then.
Related
I am currently working on the CSS-styling of a Warning statement.
This is a icon + a statement in this specific case. The code is as follow:
$sSCP .warning:before {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 WARNING"; /* <-- Font icon + statement*/
}
It works all fine, but now my question!
Is there a way to change the static value "WARNING", written behide the content property to a dynamic one? I use translationfiles where all basic var/attr/strings have been translated.
Now it would be great if I can manage a import at var-ID level.
I was actually wondering if css can do this.
cheers,
Frank
Are you using a CSS preprocessor like SASS or LESS?
Because with CSS this isn't possible. You can manipulate content via javascript or print in the variable on the server.
Another suggestion is that you can maybe add a class for each language and then change the content based on the class.
eg:
$sSCP .warning:before {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 WARNING"; /* <-- Font icon + statement*/
}
$sSCP .warning.french:before {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 ATTENTION"; /* <-- Font icon + statement*/
}
$sSCP .warning.spanish {
color: #E40613;
background-color: #fafafa;
font-size: 15px;
margin-left: 0px;
width: auto;
content:"\f071 ADVERTENCIA"; /* <-- Font icon + statement*/
}
I created and off canvas navigation which works great in desktop, but on mobile devices when the menu slides open there is white space added to the bottom of the page.
An example can be found here.
Thanks for your help! :)
you can eliminate that white space by simply adding margin: -40px; or something like that to the .fcFooter class.
.fcFooter {
font-family: 'ff-tisa-web-pro',serif;
font-style: italic;
letter-spacing: .1rem;
font-weight: bold;
color: #8a8b8c;
text-align: center;
padding-top: 10px;
padding-bottom: 10px;
/* margin-top: 40px; This line would be replaced by the following */
margin-top: -40px;
border: 1px #ededed;
border-style: solid none none none;
display: block;
}
You can add that css only to mobile devices by a media query like this:
#media only screen and (max-width: 600px) {
.fcFooter {
margin-top: -40px;
}
}
Please let me know if this was useful
The height and width of the canvas must be declared in the height and width attributes, if you want it work correctly
Wrong:
<canvas style="height: x; width: y;">
Correct:
<canvas height="x" width="y">
I have a navbar, which is pretty standard, and I want to make it a bit thinner.
So I tried this:
http://www.bootply.com/9VC5N55nJD
But the buttons remain too big. Click the drop down, and you'll see the issue. Is there a way to make the navbar thinner in one place? Or do you need to add css for the navbar and the buttons and what ever else may crop up?
Also, if I say it must be 30px in height - on a mobile, that might be too narrow, so do I need a media query for the different sizes?
Here is a working fork of your code.
Bootstrap by default uses a padding-top: 15px and padding-bottom: 15px for .navbar-nav > li > a. The following CSS will take care of this:
.navbar-nav > li > a {
padding-top:10px;
padding-bottom:10px;
}
After reducing the screen size (and for mobile devices as you've mentioned) running a media query that resets them and kind of makes the navbar a bit larger will do the trick. The following is a hacky way to do so:
#media (max-width: 768px) {
// enter css for mobile devices here
.topnav {
font-size: 14px;
}
.navbar {
min-height:50px;
max-height: 50px;
}
.navbar-nav > li > a {
padding-top:15px;
padding-bottom:15px;
}
}
Use the below css and let me know.
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-brand {
float: left;
height: 40px;
line-height: 20px;
padding: 10px 15px;
}
.navbar-toggle {
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
float: right;
margin-bottom: 0;
margin-right: 15px;
margin-top: 6px;
padding: 6px 5px;
position: relative;
}
You need to fix the CSS for the dropdown. Here's the CSS to add to your stylesheet:
ul.navbar-nav, ul.navbar-nav li {
max-height: 40px;
min-height: 40px;
}
Changing bootstraps formatting like the navbar has been difficult. They have so many styles that are set, that it's tough to find which one you need to change. Just add the above style to the css sheet and you should be gravy.
Edit
Also, why not use height: 40px if you're just going to set the min-height and max-height as the same value?
Right now I'm working on a bilingual website and kinda confuse about how to handle the RTL CSS codes. I have 2 things in my mind as follows;
1. Single CSS file - Overriding LTR default codes.
.content {
position: relative;
padding: 5px 10px 5px 240px;
}
.rtl .content {
padding-right: 240px;
padding-left: 10px;
}
2. Single CSS file - Without overiding
.content {
position: relative;
padding-top: 5px;
padding-bottom: 5px;
}
.ltr .content {
padding-left: 240px;
padding-right: 10px;
}
.rtl .content {
padding-right: 240px;
padding-left: 10px;
}
Using the first method, there will a lot of overrides. Also using the second method there will be a lot of codes in the css file. I know both will do the trick but curious to know which is the best method. Kindly suggest me if there is another method too.
If you are looking for a more robust solution, I would suggest you these approaches:
CSS Preprocessor
Learn and use a CSS preprocessor like LESS (if necessary, use a plugin like Bi-App-Less) and conditionally add the correct stylesheet.
Back-end controlled variable
Use CSS mixed with some back-end variable like:
direction: <%=rtl%>;
padding-<%=right%>: 10px;
padding-<%=left%>: 240px;.
RTL Tool
Use a RTLer tool.
CSS can display your text right to left with this:
.rtl
{
direction:rtl;
}
I prefer to handle padding and margins on a single line:
.content {
position: relative;
padding:5px 10px 5px 240px;
}
.rtl .content {
padding:0 240px 0 10px;
}
You could try doing something like this
.content {
width: 500px;
padding: 5px 10px;
border: 1px solid #ddd;
}
.content.rtl {
float: right;
direction: rtl;
}
try to hardcode the minimum amount of paddings/margins specific to a direction, heres an example http://jsfiddle.net/icodeforlove/UNS5L/
I'm trying to enlarge a smaller picture. I have a small and a large version of the pictures. I've searched on the internet, the one i'm using is the best i've found.
I know this would be much easier with 'Lightbox2' or other javascript things, but the purpose is to only use html & css.
Here you can find the link (dropbox, .zip file) to the website' folder --> https://dl.dropboxusercontent.com/u/61634717/Website.zip
It would be nice if someone could find the problem why my smaller pictures aren't enlarged when hovering over. The website is only showing the small pictures when hovering over them.
Here is the html code (for one picture):
<div class="ienlarger"><a href="#nogo"><img src="Pictures/Artists/PeopleTalkTechnoSmall.png" alt="thumb" class="resize_thumb" /><span>
<img src="Pictures/Artists/PeopleTalkTechno-Large.png" alt="large" /><br />Some text can go here.</span></a>
</div>
Here is the css code:
.ienlarger {
float: left;
clear: none;
padding-bottom: 5px;
padding-right: 5px;
}
.ienlarger a {
display:block;
text-decoration: none;
cursor:default;
}
.ienlarger a:hover{
position:relative;
}
.ienlarger span img {
border: 0px solid #FFFFFF;
margin-bottom: 8px;
}
.ienlarger a span {
position: absolute;
display:none;
color: #FFCC00;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #2E2E2E;
font-weight: bold;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 13px;
padding-left: 10px;
}
.ienlarger img {
border-width: 0;
}
.ienlarger a:hover span {
display:inline-table;
top: 50px;
left: 90px;
z-index: 100;
}
.resize_thumb {
width: 170px;
height : auto;
}
NOTE: Do not pay attention to the background colors :D. I know they are weird, but it is just for me to see the different < div > (they will be changed when the website is closer to being completed).
Alright, I downloaded your code and messed around with it.
Removing max-width: 100%; from the img CSS seems to have fixed it (line 25). In the future, please post the code along with your question, or if there are a lot of parts to it, a JSFiddle is also acceptable.
Thanks.
In your css you have all images set to a max-width of 100% probably to make it responsive, which is good. But that is also your problem. The images can only be 100% of their container and no bigger. If you remove img {max-width: 100%} from your css that fixes your issue.
But is also makes it not repsonsive. :-(
So your solution is to add a class="larger" to the bigger image and add another line to your css. You would end up with something like this:
img {
max-width:100%;
height:auto;
}
img.larger {
max-width: 500px; /* the maximum size you would allow for larger images */
}