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
Related
We are working on a markup with customized scrollbars.
For this task we use ::-webkit.
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
border-radius: 0px;
background-color: #bfbfbf;
}
::-webkit-scrollbar-thumb {
background-color: rgb(255,51,0);
border-radius: 0;
}
Is working great on desktop devices (chrome)... But on Android Chrome nothing happens.
Is this not working on Mobile? Any workaround or other solution?
Thanks!
I've been having the same problem... So far, the only explanation I've been able to find is that, the custom scrollbars works only if the body has position: absolute.
I don't like this solution as it affects some other features in my site, but unfortunately, there isn't any other way I've been able to show custom scrollbars in mobile...
I'm not sure why it is so... Should be simple enough, but for some reason, it's too complicated!
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'm trying to get the vertical piping for the about section to go away when the browser viewport is reduced to 990px or less wide.
Here's a fiddle of what I have, but can't get the #mediaquery to work: http://jsfiddle.net/8wsm7pfy/
Do you mean the border-left? If so, you need to override it. Just leaving it out won't do anything. Also, "990px or less" would need a max-width media query:
#media (max-width: 990px){
.about{
color: #000;
font-weight: bold;
height: 200px;
border-left: none;
}
}
Here's the fiddle:
http://jsfiddle.net/8wsm7pfy/2/
You're also missing an end </div> tag in your first .
I have a website where people write a message, once you click on the message the message appears on another page where people can comment under it. The second page where the message appears works fine on my monitor with a resolution of 1920 X 1380. However when I move the website to my laptop with a screen resolution of 1366 x 768 the message box that has a margin of auto moves to the left.
The message box has a class of comment
I tried this media query but nothing happened
#media(max-width: 1400px) {
.comment {
margin-left: 400px;
}
}
My css for the comment box
.comment {
margin:auto;
border:1px solid #eaeaea;
font-size: 14px;
line-spacing: 2px;
letter-spacing: 1.5px;
border-radius: 5px;
font-style: verdana;
}
Check if your media query is before your standard declaration, it should be after to prevent overwriting.
But If you want a dynamic margin I recomend to calculate it with js getting the window's innerwidth and then apply it. You can use jQuery and its .css() method
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.