I was looking for my answer # CSS media query but couldn't find it so I thought I would ask here.
Can CSS media queries be used offline/locally? I'm building a webpage it's all on shared network drives and I'm trying to setup different stylesheets based on resolution and I want to use CSS media queries min-width but they don't seem to be working and I'm wondering if it's because my site isn't live? (similar to how favicon doesn't work locally, only on hosted sites).
An example would be:
<style type="text/css">
#media all and (min-width: 1024px) {
background-image: url(images/bigbg.jpeg);
}
body {
width: 1000px;
background-image:url('images/test.PNG');
background-repeat:repeat;
overflow-x:scroll;
}
</style>
Any suggestions? Much appreciated :)
Should work locally, but you need to define what's changing. Try:
Original:
#media all and (min-width: 1024px) {
body {background-image: url(images/bigbg.jpeg);}
}
Even better:
#media all and (min-width:1024px){
body{background:url(images/bigbg.jpg)}
}
Related
I'm writing wordpress theme using Tiber and have really interesting case regarding different images on mobile and desktop.
Case:
I would like to upload 2 images (mobile and desktop version) using Advanced Custom Field PRO in Wordpress and use them in custom Timber template engine theme.
Code:
.twig
<div class="application--main-image"></div>
.scss
.application-main-image {
background-position: center bottom;
background-repeat: no-repeat;
background-image: url('../img/mobile.png');
#media (min-width: 600px) {
background-image: url('../img/desktop.png');
}
}
I found that I should use inline-style to put {{ post.image }} inside background-image but what about media queries?
Should I make some custom attributes or style inside .twig file with <style></style> but I want to use scss so it's not the case.
How would you solve that problem?
This is certainly a unique use case, here are my thoughts on how I would approach this:
<style>
.application--main-image {
background: url('https://source.unsplash.com/500x500/?ocean');
/* The actual URL would be replaced by your ACF Filed {{ post.mobile_image }} */
}
#media (min-width: 600px) {
.application--main-image {
background: url('https://source.unsplash.com/500x500/?mountain');
/* The actual URL would be replaced by your ACF Filed {{ post.desktop_image }} */
}
}
</style>
<div class="application--main-image"></div>
I think you are correct in that you will need to add the tags and the css necessary to your .twig template. I know you want to use .scss, however you only really need to change the background image property. I have create a JS fiddle to show you what I mean.
https://jsfiddle.net/robertguss/2kacx91k/7/
I hope that helps. If you have already come up with a solution that is different than mine, please share it here so not only I can learn but others in the future as well.
Cheers.
My brand uses a particular typeface, which I have bought and self host. I want to use the font on my email newsletter (with fall back fonts). Using #font-face I have linked to the self hosted fonts on my server. I've put the html newsletter file on my server and can see that the correct font is displayed. I've also sent myself a test email and again the correct font is displayed.
However, I'm writing the HTML file on my Mac and when I come to view the file (on my computer) in Firefox or Chrome the fall back font is displayed not the #font-face linked font. Why is this and what can I do about it? The link to fonts is absolute, so I presume it should work when testing locally. It is going to make development difficult if I can't test on my computer locally. Update: strangely when I open the html file on my computer in Safari the linked to fonts are displayed.
Update: is this something to do with .htaccess file? See http://ijotted.blogspot.co.uk/2012/05/self-hosting-web-fonts-for-use-on-your.html "IE and Firefox require that fonts be served from the same domain as the website" Browsers are not able to access the files because the files are stored on my server (not on my computer)?
Code here:
#media screen {
#font-face {
font-family: 'ElenaWebBasic';
src: url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.eot');
src: url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.eot?#iefix') format('embedded-opentype'),
url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.woff2') format('woff2'),
url('http://www.xyz.co.uk/webfonts/ElenaWebBasicRegular/ElenaWebBasicRegular.woff') format('woff');
font-weight: 400;
font-style: normal;
}
}
First and foremost, it's difficult to test custom fonts if you have them installed on your system. When a browser or email client sees a font in the font stack, it can display the locally installed version if the remotely referenced one fails. So even though it's broken, it will seem like it works. For email, using a remote service like Litmus or Email on Acid is a good way to test emails and web font display.
Depending on what where you purchased the font, they might have a way to reference it on a CDN. Referencing a service (like Google fonts) is currently the easiest way to display web fonts in html email.
<!-- Desktop Outlook chokes on web font references and defaults to Times New Roman, so we force a safe fallback font. -->
<!--[if mso]>
<style>
* {
font-family: sans-serif !important;
}
</style>
<![endif]-->
<!-- All other clients get the webfont reference; some will render the font and others will silently fail to the fallbacks. -->
<!--[if !mso]><!-->
<link href='https://place-you-bought-the-font.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
<!--<![endif]-->
I'd recommend looking in the font seller's site to see if they have an option like this.
Here are a few more options to try:
<style type="text/css">
#media screen {
#font-face{
font-family:'Open Sans';
font-style:normal;
font-weight:400;
src:local('Open Sans'), local('OpenSans'), url('http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff') format('woff');
}
}
</style>
Email has trouble with #import, so you might try using <link> instead:
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
Can anyone come up with a solution?
We sell phone systems from a supplier www.voipstudio.com
Our customers login to their account at www.voipstudio.com/login
We want to hide everything around the login page so it only shows the login details.
Is there anyway to over white boxes around the login dialog box?
This picture shows how it currently looks
This picture shows how we would like it shown
Is there any way to maybe load pop up boxes over the sections that we don't want the customers to see or another method?
Based on the information you provided and the page that you referenced in your question. If you add this css to your css file it will hide all of the divs you want to not be on your page.
This works because I am using the css to not show the data.
.page-id-653 .main-image {
display: none !important;
}
.page-id-653 .dark-bg {
display: none !important;
}
.page-id-653 .ft-button {
display: none !important;
}
.page-id-653 .site-footer {
display: none !important;
}
.page-id-653 .ft-button-twitter {
display: none !important;
}
.page-id-653 .ft-button-facebook {
display: none !important;
}
.page-id-653 .vs-page .header {
display: none !important;
}
Please notice that I added the class .page-id-653.
The reason I did this is to make sure we don't hide the data on any other page besides this specific page.
In order to enter the css please go to
Appearance / editor / style.css
From your Wordpress Dashboard
If you do not have access to this site and you are trying to serve it up with an iframe you could attach the id of the area you want to show to the url.
<iframe id="iframe" src="http://voipstudio.com/en/login/#l7p-login-form" width=400 height=400></iframe>
The social media sidebar they have on the page was acting a little difficult for me but this one of these answers should get you twoards one of the best solutions for your situation.
There are many ways you can get tricky with iframes. I suggest searching SO for more on, "position iframe on specific points".
I am trying to specify a backgroud image for my google site, i have the following code inside the HTML Box
body {
background: #372412;
background-image:url('a/mysite/my/home/body.jpg');
background-repeat:repeat-x;
margin: 0;
padding: 0;
font-size: 13px;
color: #FFFFFF;
}
i tried different options but the HTML Box Properties page just reports an error and i cannot get the image into my page.
i have one more image loaded using
<img src="/a/mysite/my/home/img11.jpg"
this image is shown properly so i suppose that the link is referring correctly.
can someone give me some direction to solve the above issue
I don't think you can change the background in Google Sites like this. The HTML Box is sanitized, and this CSS will probably go away.
Instead, use More -> Manage Site, then choose Themes, Colors & Fonts, and specify the background you wish to use.
Here is my #media query:
#media (max-height: 950px) {
#menu_img {
height: 800px;
width: 400px;
}
}
The query works, but only when I refresh the page. The changes do not happen while I am re-sizing the browser. I have to re-size, then refresh the page. It is happening in chrome, and the query doesn't work at all in Firefox or IE. I am mystified as to why.
I have also tried adding:
#media screen and (max-height: 950px)
and also
#media only screen and (max-height: 950px)
The site can be viewed here: http://simonmoonlandings.com if you need to see the full code.
You need a viewport tag, i.e. <meta name="viewport" content="width=device-width,initial-scale=1.0">. You also need to remove the inline width on the img and add width: 100% to the img via CSS. Finally, remove any px widths in your CSS and replace them with percentages.