I'm working on a site that needs full-page scroll-snaps for portfolio items. I got the snap-scroll and HTML smooth-scroll set up and working fine. I then added a link to a Google Font in HTML and set some text to that font in CSS. The font displayed as expected, but it seems to disable the scroll-snap behavior.
I've tried multiple Google fonts and have had the same result each time. It seems that it only disables scroll-snap when the font is correctly installed.
HTML...
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:100" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/style.css">
CSS Below...
body{
scroll-snap-type: y mandatory;
color: #222;
}
.tech-list-header {
font-size: 1.333em;
font-family: 'IBM Plex Sans';
}
#bgimg-1, #bgimg-2, #bgimg-3, #bgimg-4, #bgimg-5 {
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
/* background-repeat: no-repeat; */
background-size: cover;
margin: 0px -10px;
position: relative;
min-height: 90vh;
scroll-snap-align: start;
scroll-snap-stop: normal;
}
It seems like I should be able to use Google Fonts and Scroll-Snap in tandem, but I can only get one working at a time... Any thoughts? Thanks!
There was a similar question with an answer here: https://stackoverflow.com/a/52886080/1173898
But, to expound on that - the root issue seems to be a conflict between scroll-snap-type and a #font-face declaration. When you link to Google Fonts, all you're linking to is a short CSS file that is composed of one or two #font-face declarations.
Specifically the issue is with a any #font-face declaration with a src: rule and a url(...) value. Which, unfortunately, is pretty much all of the time, and this includes Google Fonts stylesheets.
The other SO answer mentions that it’s Chrome only. However, I've seen the same broken behavior in Firefox.
The way around this, as alluded to in the other SO answer, is to add a wrapper element, inside the <body>, like so:
<body>
<div class="wrapper">
<div id="#bgimg-1">
<div id="#bgimg-2">
<div id="#bgimg-3">
</div>
</body>
CSS
.wrapper {
scroll-snap-type: y mandatory;
}
...
#bgimg-1, #bgimg-2, #bgimg-3, #bgimg-4, #bgimg-5 {
...
scroll-snap-align: start;
scroll-snap-stop: normal;
}
Related
I have followed the instructions on the google fonts website over an over and my webpage displays as it should on MY laptop, however, the fonts 'FJALLA ONE' does not load on any other computer or device.
Am I doing something wrong? Can I store the fonts in a folder and link them like a css file?
Here is my html - part 1:
head>
<link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
part 2:
<div class="box">
<h1 class="animated bounceInDown">SHEREE WALKER </h1> </div>
My CSS
.box h1 {
font-family:'FjallaOne', sans-serif; !important;
font-size:45px;
text-align:center;
color:#FFF;
padding-top: 10%; }
Am I missing something? Any help would be amazing. I'm at my wits end.
Your problem probably exists in this piece of code:
font-family:'FjallaOne', sans-serif; !important;
it should be
font-family:'Fjalla One', sans-serif !important;
OR
font-family:'Fjalla One', sans-serif;
If that still does not fix it try removing , sans-serif
Your problem is not with your code. It is fine. I would remove the !important though, it's not necessary and the syntax is also not correct, but the code will still work even with wrong syntax.
What your real problem is: the text is white so you will never see it on a white background. You can see it here working with red text-> http://jsfiddle.net/sxntrvrj/1/
h1 {
font-family: 'Fjalla One', sans-serif;
font-size:45px;
text-align:center;
color:red;
padding-top: 10%;
}
It's on a simple asp.net web project. There's a Styles folder in the project and in that folder are four css files all pretty simple. Main.css has this:
body {
font-family: Arial, Helvetica, Sans-Serif;
font-size: 85%;
width: 700px;
height: 900px;
margin: 0px auto 0px auto;
padding: 10px;
border: 2px;
background-color: green;
}
The green (it was originally white) shows up in IE but not in Chrome. I reference the css files in the ASPX file:
<link href="Styles/CheckOut.css" rel="Stylesheet" type="text/css"/>
<link href="Styles/Main.css" rel="Stylesheet" type="text/css" />
The green was only one test. I made other changes to the css files and none showed up in Chrome. Aside from the css issue, the app performs fine in Chrome as well as IE.
The Page Inspector reflects the css files; but Chrome does not. There are a couple of similar seeming questions here but none address my issue, AFAIK.
When you refresh the page in Chrome, do you have dev tools open? And if you do, do you have "Disable cache (while DevTools is open)" checked? I've found that Chrome is pretty aggressive about caching stuff, so if you're not seeing your changes this might be something to look into. (You can verify if that checkbox is marked by hitting F12 on Windows or option-command-I on Mac, and clicking on the widget wheel. It's the first checkbox under "General".)
I have a CSS similar to the one below.
.ui-icon {
font-size: 6em;
height: 180px;
width: 180px;
}
.ui-icon .ui-icon-label {
padding-top: 15%;
}
The top padding doesn't display the text in IE9 (i.e. ui-icon-label).
HTML is also given below.
<div class="ui-icon-color ui-icon">
<div id="icon-1">
<i class="icon-cog"></i>
</div>
<div class="ui-icon-label">My Label</div>
</div>
But the same code works well in Chrome and Firefox. IE9 displays the ui-icon-label till the padding is 13.4%. Till the value, when I increase it gradually the text moves downwards a bit. Above that value it suddenly disappears. But For me 15% looks the best position to place the label. I went through different solutions provided in the suggest like 'clear:both' or using the W3C validator. But they didn't help.
FYI, the icon-cog class comes from font-awesome.
Have you considered using a IE9 targeted stylesheet with media queries to solve that issue?
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="ie9.css" />
<![endif]-->
// In the CSS:
#media (max-width: ???px) {
.ui-icon .ui-icon-label {
padding-top: 30%;
}
}
I have a problem getting the fonts in links for a menu to look the same across browsers. It wouldn't be such a problem if it was just a small difference, but the fact of the matter is that in IE 9 the font looks to be at least a couple of pixels or more bigger than in the others, while using the exact same css.
Now being in a main menu, this looks pretty bad. Anyone know why this happens, and what I can do about it?
Here's the css rule:
ul#menu li a
{
width: 80%;
text-align: center;
font-family: HelveticaNeueLight, Helvetica, Arial, Sans-Serif;
font-weight: bold;
font-size: 12px;
text-decoration: none;
line-height: 38px;
color: #333;
text-shadow: 0px 1px 0px #e5e5ee;
display: block;
/*Hiding dots around clicking on links*/
outline: none;
overflow: hidden;
}
If this is truly vital, and you do not mind using Conditional Comments to send IE-targeted CSS to the browser, you can create a Conditional Comment stylesheet for IE 9 like so:
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="/ie9.css" />
<![endif]-->
With another CSS rule for the font-size property in this css file.
Otherwise, a good first step is to always use a CSS Reset to normalize between browsers. Commonly used resets are Eric Meyers and YUI.
Perhaps the CSS for some other property is inconsistent? I'd try using a CSS reset file (http://developer.yahoo.com/yui/reset/) or adding zoom: 100% in there to see if that fixes it.
Ok, I am currently directing my style sheets as listed below:
<link href="Styles/mobile.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" />
<link href="Styles/Site.css" rel="stylesheet" type="text/css" media="screen"/>
On the Site.css I have a certain ID with a background-image:
#container {
width: 1000px;
margin-left: auto;
margin-right: auto;
background: url('../images/topbackground.gif') no-repeat;
}
On the mobile.css I thought I could simply change it to "none" or another image, somewhat similar to this (I've tried several variations at this point):
#container {
width: 100%;
margin-left: 0;
margin-right: 0;
background: #ffffff none;
z-index: 30;
}
However, it doesn't seem to be working. The background still shows on the mobile version of the site. I've been looking at it in both Opera Mini and the Android SDK Emulator. The mobile version of the site is picking up all other properties from mobile.css, just not background-image changes.
I know it's got to be something obvious at this point that I am just oblivious to. Any help would be appreciated.
this is because you load mobile.css before you load Site.css. (in the example you have made).
I thinks its working if you juste insert site first then mobile.css ..
If you need to keep it that way for some reason you gonna need to use !important afters the statement.
Here you can find a working example:
http://jsfiddle.net/2EaQb/