I try to make responsive design website using:
TYPO3
Foundation framework
extension adx_adaptive_images
The TYPO3 and foundation framework work pretty cool, but adaptive images doesn't resize images at all.
Previously I try with http://adaptive-images.com/ but I have the same problem.
I use default .htaccess file
Any suggestions?
The problem was: no img { width: 100%; }in css file
Related
Question
How to quickly test different fonts in a React project?
Overview
I'm learning how to use React/Gatsby with this template. In this example the site uses .sass files for styling and I see font-family: "slick" is referenced in the slider.sass file and reset.sass file has this entry:
body
font-family: Roboto, Helvetica, Arial, sans-serif
font-size: 16px
Desired outcome
I would ideally like to experiment as quickly as possible with lots of different combinations of fonts in this and other projects.
For example, I would like to try changing all fonts to something like this for titles/headers and this for everything else.
What have I looked at?
I've seen this from Gatsby founder kyleamathews but my guess is that it would clash with current sass configuration in this example.
I also see that variables can be used with sass and could potentially be used for testing different fonts in this project but I'm not sure exactly how.
Thanks for any help showing how I should approach this.
Let me kick my answer off with a warning:
Disclaimer: I do not recommend doing this in production. This is intended for testing font pairings locally.
Once you have chosen your fonts, I suggest hosting webfonts on your domain to avoid hitting a remote CDN. You could use classic #font-face declarations, or Kyle Matthew's typefaces packages, for example.
Now, what you basically want to do is to import fonts client-side, to make it easy to try them out without rebuilding your site.
1. Get a link to embed your fonts client-side
First, you'll need to get an embed link from your font hosting CDN (in your case, from Google Fonts). It will look like this:
https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat
2. Embed the fonts on your Gatsby site
To embed the link on your Gatsby site, you have two choices:
using <link>
You can add a font to your Gatsby app as an external client-side package. You would typically either customize html.js, or use react-helmet.
In your case, I see here that react-helmet already built into the starter you're using, so you would need to update layout.js like this:
<HelmetDatoCms
favicon={data.datoCmsSite.faviconMetaTags}
seo={data.datoCmsHome.seoMetaTags}
>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap" rel="stylesheet">
</HelmetDatoCms>
Check out the README of gatsby-source-datocms to read more about the HelmetDatoCms component
using #import
You can import a remote font in CSS (or SASS):
#import url('https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat&display=swap');
This is already being used in your starter, the import is in reset.sass. You would simply need to update the URL with one that includes the fonts you want to try out.
In your case, I would recommend the second option. You'll only need to edit a single file, which will make testing several fonts faster.
3. Use the fonts in your CSS
Third, no matter if you chose the <link> or the #import option, you'll need to update your CSS to use the fonts you've imported. As you mentioned already in your question, this is where is happens.
You'll want something like this:
body {
font-family: 'Montserrat', sans-serif;
}
h1, h2, h3 {
font-family: 'Great Vibes', cursive;
}
I'm adding background images by css.
When I'm adding SVG images it`s working fine.
background: url(./logo.svg)
But when I'm adding PNG images it`s not working.
background: url(./logo.png)
Can anyone please help me to figure out the problem.
Browser: My application renders as IE7 Mode(Document Mode)
I have a similar requirement as Deka87 had for Use font awesome icon as css content. Now, when I implement the solution given by Mr. Alien I get a weired problem.
CSS Class:
.listing th.sort-col-d{
font-family: FontAwesome;
content: "\f0dd";
}
This when rendered in browser, makes the content=" ". Screenshot
When I check my network tab then the font awesome request is successful and I can see the Response Body. It even changes the font for the th element.
I am not sure what could be the issue?
Quoted from the font-awesome website: http://fortawesome.github.io/Font-Awesome/get-started/
If you need IE7 support, you have my condolences. Really. Font Awesome
4.4.0 doesn't support IE7, but an older version does. You'll need to check out the 3.2.1 instructions for using IE7. Then go complain to
whomever decided your project needs IE7 support.
I am using Croogo CMS in my Cakephp website, its working fine in server and all linux machines but it’s not working properly in windows machine. Please find below issue what I am facing in my local host
PHP Version:5.3.13
Croogo Version: 1.4.3
OS: Windows 7 - 32 bit
Goal: I want to use my Cakephp default layout instead of croogo theme layout and css and js from croogo theme
Cakephp Layout location:
app/Views/Layouts/default.ctp
Croogo Theme Layout
Views/Themed/[MyTheme]
default.ctp
css[folder]
js[folder]
Now problem is css and images point to this directory theme/[MyTheme]/css/style.css. But this folder structure is not available, so I am getting below error
"NetworkError: 404 Not Found - http://localentrust.dev/theme/[MyTheme]/css/style.css"
Please guide me to solve this issue. Thanks!
probably u have permissions issues, there is no logical reason for your css to not be displayed, the other thing i see is that your default view is not under Layouts folder, and your js and css folders should be under webroot folder. greetings
Using boxsizing.htc is not working for me. The answers to other posts here on Stack Overflow have not worked for me:
Zerb Foundation 3 - IE7 Fix not working?
Making Zurb's Foundation 3 work with IE7
Here's what I did:
Created the boxsizing file in TextEdit, put the code there, named it boxsizing.htc, saved as Unicode 8.
Uploaded to my javascripts directory, at my domain root.
Added this to my stylesheet:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
*behavior: url(http://mydomain.com/javascripts/boxsizing.htc);
}
Added this to the htaccess file:
AddType text/x-component .htc
To be safe, I made sure that jquery and modernizr are linked before the stylesheet is, just in case the htc file needs jquery.
Still no results. Any ideas?
The site is http://bureauforgood.com/index.php
Thanks!
Have you tried using *behavior: url(/javascripts/boxsizing.htc);?
I had to fiddle with the path to get this working.