I wrote media query for my HTML code, but not applying. I have to show my text in center in small screen.
#media(max - width: 400 px) {
h1 {
text - align: center;
}
}
<h1>Search for a Doctor or Care Provider</h1>
How to fix?
The problem that #Zvezdas1989 is removing is that you had a space between 400 and px, they need to be together, just like the max-width and the text-align.
#media(max-width: 400px) {
h1 {
text-align: center;
}
}
So that will fix the problem.
It's not applying because of the spaces, you need to remove those in order to make it valid:
#media (max-width: 400px) {
h1 {
text-align: center;
}
}
<h1>Search for a Doctor or Care Provider</h1>
You need to remove the spaces, like this:
#media (max-width: 400px) {
h1 {
text-align: center;
}
}
<h1>Hello Friends</h1>
Related
I want to add a margin (a break <br>) between the title and the price tag on mobile. the website is http://www.jokerleb.com. I tried
.h3{
margin:5px;
}
// and
.tags{
margin:5px;
}
and I also tried working on other divs and media queries, nothing worked, it seems that just applying a margin won't change anything. I've been working on this super silly problem for 2 days and don't know why it's not working.
Just add media query like following to get the issue fix.
#media (max-width:400px) {
.tags {
margin-bottom: 8px; /* Added */
padding: 0;
float: right;
right: 24px;
bottom: -12px;
}
}
You are doing it in a wrong way! It's crazily floated and stuff. You might need to do this and it would work:
#media screen and (max-width: 400px) {
.post-block .post-right h3 {
max-width: 100%;
float: none;
padding-top: 40px;
}
}
Preview
I have a text block on my website:
Specialtyreagents
<h1>Specialtyreagents</h1>
Can I somehow add a - symbol to this block within CSS, so it should looks like this:
Specialty-reagents
I can use only CSS in my case!
Thank you for your help.
Use a pseudoelement with the word you want on mobile, and use font-size to hide or show it.
example
codepen
h1:after {
content: 'Specialty-reagents';
font-size: 0;
}
#media screen and (max-width: 500px) {
h1 {
font-size: 0;
}
h1:after {
font-size: 32px;
}
}
<h1>Specialtyreagents</h1>
With just CSS you can't include that - but if you need to use it in a specific case you can write again the text like this with a pseudo-element:
h1 {
font-size: 0;
}
h1:before {
content: "Specialty-reagents";
display: block;
font-size: 1.5rem;
}
<h2>Specialtyreagents</h2>
<h1>Specialtyreagents</h1>
On the long ride you can have two html elements, one for mobile and one for desktop:
<h1 class="desktop">Specialtyreagents</h1>
and
<h1 class="mobile" >Specialty-reagents</h1>
Then, you should have some css code for handling it:
.desktop {
display: block;
}
.mobile {
display: none;
}
#media (max-width: 720px) {
.desktop {
display: none;
}
.mobile {
display: block;
}
}
With media query:
#media only screen and (max-width: 500px) {
h1 > span:after {
content: "-";
}
}
<h1>Specialty<span></span>reagents</h1>
As others have said, you can use a pseudo element to achieve this.
The best way to go is to just add a new pseudo element when viewing on a small viewport (ie. a mobile phone). Here is some extra info on pseudo elements and how they can be used.
Example...
#media screen and (max-width: 768px) {
h1 {
font-size: 0px;
}
h1::after {
font-size: 30px;
display: block;
content: "Specialty-reagents";
}
}
<h1>Specialtyreagents</h1>
The only thing you may need to change if the max-width for the media query and the font size of the heading.
Try this code for the solution please:
#media only screen and (max-width: 500px) {
h1 > span:after {
content: "-";
}
}
good evening, I am using Joomla built in Bootstrap2. I am making website in full width view, the problem is below 768px 20px padding add on both sides of the screen. I have added following but its not working:
#media (max-width:767px) {
.container-fluid {
padding: 0;
}
}
Thank you for your help.
Regards,
You need to update the rule defined in the responsive-bootstrap.min.css. Code in that file is :
#media (max-width:767px) {
body{
padding-left: 20px;
padding-right: 20px;
}
}
So to make it zero you have to override that rule so replace your code with this:
#media (max-width:767px) {
body{
padding: 0px;
}
}
I am not sure if this is entirely possible. Want to check here.
Basically what I am trying here is to have a default font size (say 40px). when a media query kicks in I want to change it to reduce to 80% of default font size. Is that possible?
.text p span{
font-size:40px;
}
#media screen and (max-width: 640px){
.text p span{
font-size: <0.8*40px>;
}
}
#media screen and (min-width: 641px) and (max-width: 1024px){
.text p span{
font-size: <0.6*40px>;
}
}
The reason I am not setting px values is because .text p span gets different class names which will have different font sizes. But they need to scale down in the same ratio. Am I trying that's not achievable?
You could use em, like this, where you set a default on the body, or on any parent you want to inherit font-size from, and adjust from there
Also rem and % is possible alternatives, it all comes down to markup structure etc.
em is relative to its direct or nearest parent, rem is relative to the html (root) - their font-size.
body {
font-size: 20px;
}
.text p span {
font-size: 2em;
}
#media screen and (max-width: 640px) {
.text p span {
font-size: 1.6em;
}
}
#media screen and (min-width: 641px) and (max-width: 1024px) {
.text p span {
font-size: 1.2em;
}
}
<div class="text">
<p>
<span>
Hey there ...
</span>
</p>
</div>
With rem one can do like this
html {
font-size: 40px;
}
.sampleClass {
font-size: 20px;
}
#media screen and (min-width: 641px) and (max-width: 1024px){
.sampleClass span {
font-size: 0.8rem;
}
}
#media screen and (max-width: 640px){
.sampleClass span{
font-size: 0.6rem;
}
}
<p class="sampleClass">
This is 20px
<span>This is relative to the html element when #media kicks in</span>
</p>
I'm not the biggest fan of ems but if you only want to reduce to 80% use .8em as your strong override of the .text p span size you have set.
#media screen and (max-width: 640px){
.text p span{
font-size: .8em;
}
}
It might be worth looking into Sass/Scss for setting variables and having operators applied to them. You can set your variables at the start of your stylesheet, and when you compile your .sass or .scss file, it outputs the correct number in your .css file
http://sass-lang.com/guide#topic-8
It is entirely possible and as you can probably tell there is a number of ways to achieve this. The technique I use is very simple:
Set the font-size on the body and html elements in px, as well as any media query to step the font size up or down, in px.
Use rem units to set the font-size where you need. rem stands for root em, where root is the topmost element in the DOM, usually html or body.
Example:
html, body {
font-size: 18px;
}
#media screen and (max-width: 320px) {
html, body {
font-size: 15px;
}
}
/*
The rem values use 18px or 15px as the base unit
depending on matching query.
In this case there is no need to use 1rem unless you need to reset
a previously changed value.
*/
.heading { font-size: 1.2rem; }
.small { font-size: 0.8rem; }
Using rem makes it very easy (for me at least) to reason about relative sizes.
em on the other hand is very useful if want a value to be affected by the font-size of the closest parent element.
For example if you wanted to have a padding that scales proportionally to the text size of a .heading, then you'd use em:
html, body {
font-size: 18px;
}
#media screen and (max-width: 320px) {
html, body {
font-size: 15px;
}
}
.heading { font-size: 1.2rem; }
.small { font-size: 0.8rem; }
/*
Now you define a padding that is always 80% of the element's
font-size.
And since .heading is set at 1.2rem, the padding will be
80% of 1.2rem.
*/
.heading { padding: 0.8em; }
I have a, for me, strange situation that I have never came across before.
I have created a class that defines a font-size of 0.8vw
If the screen-size-width is smaller then 750px a new media query is loaded where the font-size is 3.2vw.
Because this is the same class I have to use !important on the 750px query.
Here comes the problem.... If, and there is, there will be another media-query I have to use another !important but as far as I know that won't be possible.
I'm starting to think that I don't fully understand how to use the media-queries in combination with different styles.
Here is an example of how this should go:
#media (max-width: 750px) {
.header_devider{
font-size: 3.2vw !important;
}
}
#media (max-width: 320px) {
.header_devider{
font-size: 4vw !important;
}
}
.header_devider{
font-size: 0.8vw;
}
<div class="header_devider">
test content
</div>
Hope somebody can tell me how to fix this.
M.
Declare your media queries after your initial style declaration and it should work:
.header_devider {
font-size: 0.8vw;
}
#media (max-width: 750px) {
.header_devider {
font-size: 3.2vw;
}
}
#media (max-width: 320px) {
.header_devider {
font-size: 4vw;
}
}