I have been working with this new technology for me (Responsive Design) and I hate the problems which I don't know the answer, I get frustrated :/
Here is my code: http://jsbin.com/ejadej/1
With the latest version of Chrome, I see the site how is supposed to be by my code, whilst Firefox isn't reading this media query
#media screen and(min-width: 960px) {
#php-info-title {
background-color: #322E2C;
position: absolute;
left:100px;
bottom: 0px;
color:white;
z-index: 0;
max-width: 300px;
}
}
It's just ignoring it (if I remove the media query it works well, but i don't want to do that).
The curious thing is that with the other media queries written above that one, Firefox works well.
What's going on with Firefox?
Thanks for your help.
Per spec, you need a space between the and and the (. If you don't have it, it's not a valid #media rule.
I filed https://bugs.webkit.org/show_bug.cgi?id=117396 and http://code.google.com/p/chromium/issues/detail?id=248043 for what it's worth.
Related
I am a new coder(14-year-old) and for now, I am learning web development, I am telling you this because I don't know any "tech-words or complicated words" so please answer in simple language.
Question:
I am writing this media query:
#media only for screen (max-width: 400px; ) {
#box1 {
font-size: 4em;
color: white;
border-left: 3em solid yellow;
}
}
And the results are not showing up,
So could you please tell me, is there any mistakes in the code? or is it something else
I am using Google Chrome as the browser and Microsoft visual studio code as code editor
I don't know if this will help you, but sometimes, you just need to clear cache in order for the CSS to load again.
To clear cache:
On your computer, open Chrome.
At the top right, click More .
Click More tools. Clear browsing data.
Next to "Cookies and other site data" and "Cached images and files," check the boxes.
Click Clear data.
Hope it was helpfull
I believe it should be:
#media only screen and (max-width: 400px; ) {
/*whatever code is in here*/
}
Try using
#media (max-width: 400px) {
#box1 {
font-size: 4em;
color: white;
border-left: 3em solid yellow;
}
}
Note: This will work for all screens having width < and = 400px
I have a WordPress site and for some reason, some of my CSS styles does not being applied in any browser.
/* This rule is rendered in the browser */
.post-date,
.author {
font-weight: bold;
}
/* This two rules doesn't render in the browser */
figure.alignright,
figure.aligncenter {
text-align: center;
}
#media screen and (min-width: 500px) {
figure.alignright {
float: right;
margin-left: 20px;
}
}
<p class="post-date">Some published date</p>
<p class="author">Author</p>
<div class="wp-block-image">
<figure class="alignright is-resized">
<img src="someImgageURL" width="100" height="100">
</figure>
<div>
For example I have the figure style which doesn't get applied.
And when I look in the Style Editor in Firefox or Inspector in Chrome I can't find the style. It's like it doesn't exists, and I can't figure out why.
You are using this:
#media screen and (min-width: 500px) {
figure.alignright {
float: right;
margin-left: 20px;
}
}
It's mean browser has min-width 500px will run this css, so this css is overide your code above.
You should use
#media only screen and (max-width: 500px) {
figure.alignright {
float: right;
margin-left: 20px;
}
}
Most browsers cache websites and their style-sheets, images and so on to safe bandwith.
This means you will have to force your browser to update the css file, which you can do by manually deleting the cache, or to disable caching completely!
Maybe you have some CSS syntax error before the line. (maybe extra bracket opened or something else)
I read all the comments you wrote and came to this conclusion.
You can test it with the below method.
Please remove all the CSS code in the CSS file and just leave the CSS section you want to test.
If it works then review the CSS code you just removed and check the typo.
Hope this helps you.
Thanks
I finally found out what the problem was. It was Wordpress own caching of the stylesheet that gave the problem. After clearing the Wordpress cache, everything is working as expected.
I have a website which was created by someone else and I have been tasked with taking over. On this website there was a sandwich style menu and a search bar in the navigation.
I have since created a mega menu (WordPress Plugin). Now the older icons are redundant and useless therefore I have applied a display: none; rule to the CSS to remove them from the frontend.
This works correctly on Safari and Chrome on Mac however it seems as though Windows users on Firefox and Chrome as well as users of Firefox on Mac can still see the icons.
Can anyone help? The website is www.quanser.com. You will see the icons in the header to the right.
header.site-header .badge-links {
display: none !important;
}
I'm using Firefox on Windows and still can see the Search and Hamburger menu icon (my first time visiting your site), this means this has nothing to do with cache. Though usually working with Wordpress, you should clear the cache after changing some CSS.
So far, I've inspected the CSS and see that this CSS block is repeated 3 times, which the last block will look like:
.header.site-header .badge-links {
position: absolute;
top: -3px;
right: -.625rem;
}
Try to find this block in your CSS, and add something like this:
.header.site-header .badge-links {
position: absolute;
top: -3px;
right: -.625rem;
display: none;
}
You don't need to `!important` in your CSS in this case.
There is a pretty efficient way for solving this:
header.site-header .badge-links {
z-index:-100;
}
#media screen and (max-width: 992px) {
header.site-header .badge-links {
z-index:100;
}
#
}
I applied the code below to fix the alignment on my desktop site but it's also creating an unwanted margin on mobile. How can I exclude this effect on certain #media styles?
.site-container {
margin-top: 60px;
The site is: https://shiftins.com. Thank you!
for example like this:
#media screen and (max-width: 600px) {
.site-container {
margin-top: 0px;
}
or did I misunderstand something?
I would first ask if you were using Modernizr and see if you were using bootstrap for your site - to help with all the media queries.
Adding Modernizr should solve your issue, if not then comment and ill show you an alternative way.
Here is how the site looks on Internet Explorer:
http://www.browserstack.com/screenshots/0c3c039e85f44bb70fddfc34b887b5bbc3357899
I've only seen it on the latest version of IE on Windows 8.1, but it's possible that it happens on older versions as well. Unfortunately, I'm on a Mac and can't find any emulators to run IE.. So I am coming to the greatest community of tech-savvy people I know of for help.
The site (built with Wordpress) is commercialpaintersinc.com. It looks great on Google Chrome and Safari.. so this issue seems to be just in IE (although I haven't tested in Firefox either..).
This is how it is supposed to look:
Anyone got any idea as to what CSS I entered that caused the issue and/or how I can fix it to make it look how it is supposed to on ALL browsers?
Any feedback is majorly appreciated. Thanks!
You are presently using negative margins to adjust layout, which is giving wildly different results in all three major rendering engines (Trident, Blink, and Gecko). I would advise against this, as it's likely these vendors will need to discuss whose approach is correct, or if all three need to adjust to be in better conformance with a fourth alternative.
The primary issue is is the over-hang of your logo beyond your negative margin. If you were to position the image absolutely, you could get more consistent results. However, upon doing so you will need to restore the layout of your header since a crucial element will no longer contribute to its dimensions.
#logo {
position: absolute;
}
#main-header {
min-height: 160px;
}
The above two rules appear to restore the layout for me in IE, and Firefox. That being said, I still think Chrome may be in the wrong here - you should always test your layout regularly in all three major browsers to ensure you aren't building on top of a browser bug.
I work on the Internet Explorer team, and have filed an issue internally for us to investigate this particular layout anomaly further. I've created a reduced demo of the issue as a public fiddle as well.
If you need to test Internet Explorer from a Mac in the future, please visit http://modern.ie.
Thank you all for the help. I was having a mental blockage and once again this community helped me to move forward.
Jonathan Sampson was correct that the root cause was that the CSS was not originally done correctly. I did the CSS edits myself and I am self-taught, so this was no surprise to me, haha. However, I had already come up with a solution.
My Solution:
I used the famous CSS Browser Selector script which can be found here: http://rafael.adm.br/css_browser_selector
I added it to my JS folder (mysite.com/wp-includes/js/css_browser_selector.js) and then added:
<script src="css_browser_selector.js" type="text/javascript"></script>
right before the </head> tag in the header.php file.
At that point I was able to just create browser-specific CSS. It's dumb that FF and IE are so picky when it originally worked fine how I had it in both Chrome and Safari... But oh well.
Here is the code for Chrome/Safari vs. the code for Firefox/IE:
Chrome/Safari (Webkit):
.webkit #logo {
margin-bottom: 10px;
max-height: 110px;
position: relative;
z-index: 99999;
background: #fff;
border-radius: 150px;
border: 20px solid #fff;
}
.webkit #main-header {
padding: 10px 0 0 0;
margin-bottom: -65px;
margin-top: -20px;
}
Firefox (and same used for IE as well):
.gecko .et_pb_slider {
top: -60px;
margin-bottom: -63px;
}
.gecko #logo {
margin-bottom: 10px;
max-height: 110px;
position: relative;
z-index: 99999 !important;
background: none repeat scroll 0% 0% #FFF;
border: 20px solid #FFF !important;
border-radius: 150px;
}
.gecko #main-header {
margin-top: -20px;
}
So yeah I didn't see Jon's answer until after I had "fixed" the issue. So, I will leave it as is.. although I'm sure my CSS is very sloppy! :P
Screenshot of IE browser now that it is fixed:
http://www.browserstack.com/screenshots/0d669a15d18040086fede2df90f134e526aef8f3
Thanks,
Chris