First time here, so sorry for any lack of understanding in the code of conduct of this place.
I've already read the post with a similar described problem, but it didn't help :-/
Sorry, I'm a n00b, be gentle!
Just started structuring my sass into different files, and at the same time started using sass instead of scss.
My problem, which is probably really simple and stupid, is:
Compilation Error
Error: Invalid CSS after "...align: top; } }": expected 1 selector or at-rule, was "{"
on line 43 of Users/Test/Documents/walters.dk 6.0/styles/1-base/_typography.sass
from line 2 of Users/Test/Documents/walters.dk 6.0/styles/1-base/_base-dir.sass
from line 2 of sass/Users/Test/Documents/walters.dk 6.0/styles/app.sass
>> vertical-align: top; } } {
The file the error is originating from looks like this:
(Line 43 is the bottom one, "vertical-align: top")
// Text
h1
font-family: 'Raleway', sans-serif
font-weight: 300
display: inline-block
color: $redish
margin: 0 auto
text-align: center
font-size: 25px
line-height: 1
h2
font-family: 'waltershand', Arial, sans-serif
text-align: center
font-size: 10rem
margin-top: 3%
h3
font-family: 'waltershand', Arial, sans-serif
text-align: center
h4
font-family: 'Raleway', sans-serif
font-size: 0.85rem
font-weight: 600
display: inline-block
h5
font-size: 3rem
font-family: 'waltershand', Arial, sans-serif
margin: 4vh 5vw auto 5vw
z-index: 2
+mq(875px)
font-size: 4.4vw
display: inline-block
vertical-align: top
First time using mixins, so in case it helps, i have added the code below :
=mq($size)
#media only screen and (min-width: $size)
#content
The files compile into app.sass like this:
#import 'variables'
#import '1-base/base-dir'
I'm guessing the problem isn't in the actual line 43, but rather in the way my mixin is written, or the way its importet.
Here's hoping some brainy code master can help!
By removing this
+mq(875px)
font-size: 4.4vw
display: inline-block
vertical-align: top
Your code is good to go. I'm not sure about the mq what does it do ?
You can cleary see the error and try it out here
Error: no mixin named mq
Backtrace:
stdin:38
on line 38 of stdin
#include mq(875px) { -------------^
Related
can you please give me the right CSS snippet to move these price tags from left to right? I am very insecure with this positioning and don’t want to produce crippled code so it would be great to get some help here.
https://prnt.sc/1x10vpj
I suppose it is thie, but not 100% sure:
position: absolute;
bottom: 12px;
left: 12px;
padding: 3px 11px;
margin: 0;
min-width: 0;
min-height: 0;
line-height: 20px;
border-radius: 50px;
background-color: #fff;
color: #111;
font-weight: 700;
font-size: 13px;
}```
Thanks and regards!
Seems a bit of an incomplete question. Would be good to see where the element s sit in relation to other elelements and also associated CSS.
But looks like it is as simple as changing left, to right in your CSS.
I'm designing a responsive site which means the layout changes. When viewed as wide as possible, my blockquote wraps to the next line. I would like for it to be on the same line.
I have managed to fix the open quote by adding some text-indent however I'm unable to move the close quote.
My HTML:
<blockquote><p class="blockQuote">In recent years we have noticed a growth in demand for audit services, by enterprises with foreign investment, partly because of the demands on the part of organizations such as the CPI and the central bank.</p></blockquote>
CSS:
blockquote {
font-family: serif;
font-style: italic;
color: #000;
margin: 0px 0px 10px 0px;
}
blockquote:before {
content: "\201C";
}
blockquote:after {
content: "\201D";
blockquote:before {
position: absolute;
width: 60px;
height: 60px;
line-height: 1;
font-size: 120px;
}
blockquote:after {
position: absolute;
width: 60px;
height: 60px;
line-height: 1;
font-size: 120px;
}
When I use a span element, the close quote fixes but the open quote looks like it should move further up.
Add <span> tag instead of <p> tag. Working JSFiddle here https://jsfiddle.net/jfmf4ujc/
As the title says, I have a weird css error on my hands. I've built a rails app using bootstrap and some custom css, testing the whole thing in chrome initially. I started checking it out in firefox and my user sign in form-fields don't seem to respond to clicking on them or typing. You can't see the placeholder value nor what you're typing. Has anyone heard of this before? Any ideas what causes it?
To illustrate I made a jsfiddle (my first). I was kind of heavy handed and just copied the css right out of my inspector so it's a little bit of a mess. Open it in firefox and the form cannot be typed into. In chrome it's fine. The offending line on this fiddle appears to be 28, the -mox-box-sizing rule.
http://jsfiddle.net/vRF3F/
.row-fluid [class*="span"] {
-moz-box-sizing: border-box;
display: block;
float: left;
margin-left: 2.12766%;
min-height: 30px;
width: 100%;
}
Ok, I think I have found the cause:
If you remove this line:
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
border-radius: 4px 4px 4px 4px;
color: #555555;
display: inline-block;
font-size: 14px;
/* height: 20px;*/
line-height: 20px;
margin-bottom: 10px;
padding: 4px 6px;
vertical-align: middle;
}
it will work. Setting the height property will cause the parent div to collapse so you won't see the input box anymore, hence it appear to not work. The padding alone should be fine to give it a height.
See updated fiddle here:
http://jsfiddle.net/AbdiasSoftware/vRF3F/3/
Bootstrap CSS does include the box-sizing property with all vendor prefixes in that selector, I don't know why you are only getting the -moz
.row-fluid [class*="span"] {
...
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
...
}
Try updating your CSS with that and you will note that your inputs are now smaller in height so just set a specific value for height and I think you'll be good to go
.new-user input[type="text"],.new-user input[type="password"]{
height: 60px;
}
I have a simple html h1 title that works fine on desktop browsers but duplicates the font on iOS (Tested on Safari & Mercury Browser)
Preview image: http://d.pr/i/ku1I
The h1 css:
.headerInterior h1
{
width: 100%;
float: left;
color: #f2085c;
font-family: 'effBold';
font-size: 79px;
}
Does anyone had the same problem and know a solution for this?
Any help will be appreciated.
Cheers!
Try this:
Add this in your CSS class
font-weight: normal;
OR
text-shadow: 0 0 0;
This happens because the browser tries to generate the font weight thats requested if its unavailable already (h1 class in the example has default font-weight set to bold).
For instance, if we are using the following Google Fonts URL:
http://fonts.googleapis.com/css?family=PT+Serif:400,600italic
We have two ways to use this font:
.first-way{
font-family: 'PT Serif';
font-weight: 400;
}
OR
.second-way{
font-family: 'PT Serif';
font-weight: 600;
font-style: italic;
}
Using: font-weight: normal; basically defaults to the font-weight of the available font.
Further reading: http://alistapart.com/article/say-no-to-faux-bold
I'm having trouble to get the -webkit-tap-highlight-color property to apply to a div - I'm at a loss as to why it isn't. Copying all the styles that apply to it below. The desired outcome is a back button as shown here: http://building-iphone-apps.labs.oreilly.com/ch03.html#ch03_id35932102
.backButton {
font-weight: bold;
text-align: center;
line-height: 28px;
color: white;
text-shadow: rgba(0,0,0,0.6) 0px -1px 0px;
position: absolute;
top: 13px;
left: 6px;
font-size: 14px;
max-width: 50px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-width: 0 8px 0 14px;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-border-image: url(/static/images/backButton.png) 0 8 0 14;
}
.backButton.clicked {
-webkit-border-image: url(/static/images/back_button_clicked.png) 0 8 0 14;
}
.toolbar{
background-color: #e1f7ff;
-webkit-box-sizing:border-box;
border-bottom:1px solid #559D75;
padding:10px;
height:53px;
background-image:-webkit-gradient(linear,left top,left bottom,from(#e1f7ff),to(#a1d2ed));
position:relative;
z-index: 70; }
Applied here:
<div class='toolbar'>
<div class='backButton'>Back</div>
</div>
Viewing it in iPhone simulator (OS 4 enabled) and Safari - same problem with both (tap highlight still shows up).
Thanks in advance.
Try adding:
-webkit-user-select: none;
This is embarrassing. The image I had been using from an example back button online had the background color in it - it wasn't a problem with the CSS property.
I'm almost embarrassed enough not to post this answer, but I'm willing to swallow my pride in hopes of helping others. Let this be a lesson: if you use example images from Google images, etc., be sure the copy you download looks as you expect it to.
I wish I could reclaim the hours I spent trying to debug this, but maybe this will help someone else gain them back.
Lesson learned... thoroughly.