I have spent several hours trying to figure out what is the problem ..
I have no idea what is wrong with media queries.
How css files are included in index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Custom styles CSS -->
<link href="css/main.css" rel="stylesheet" media="screen">
<!-- Responsive CSS -->
<link href="css/responsive.css" rel="stylesheet">
The part of my main.css file
#home {
font-size : 1.5rem;
background: url(../images/home2.jpg) no-repeat center center;
-webkit-background-attachment: fixed;
background-attachment: fixed;
background-color: #backgroundHomeColor;
background-size: cover;
padding: 0;
position: relative;
white-space: normal;
}
/* === MAIN === */
.section-padding {
padding: 6rem 0;
}
The responsive.css file
#media only screen and (max-width:1920px) {
.personal-info{
padding-right:180px;
}
}
#media only screen and (max-width : 1600px) {
}
#media only screen and (max-width : 1280px) {
}
#media only screen and (max-width : 1200px) {
.portfolio-item{
min-height: 150px;
}
.download-button a{
margin-right: 10px;
}
}
#media only screen and (max-width : 992px) {
.navbar-custom .navbar-brand{
padding: 10px 15px;
}
.navbar-custom .navbar-nav > li > a,
.navbar-custom .navbar-nav .dropdown-menu > li > a{
font-size: 12px;
padding: 15px;
}
/*about me section*/
.biography {
margin-top: 20px;
margin-bottom: 45px;
}
/*resume*/
.resume:before,
.resume:after{
left:0px;
}
}
#media only screen and (max-width : 768px) {
// Home intro section
#home {
font-size : 1.4rem;
}
.md-full-height {
height: 560px !important;
}
// General styles
.section-padding {
padding: 222rem 0;
}
.social-icons ul{
margin-left: 0;
}
.social-icons li{
padding:0;
}
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
#home {
font-size : 1.2rem;
}
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
#home {
font-size : 1.0rem;
}
}
The most problematic is #media only screen and (max-width : 768px) {
It works sometimes, sometimes not, I have no idea what is wrong.
Consider this class
#home {
It works with media 320px,480px, 992px .... but IT DOESN'T apply style for 768px media query even with !important.
One interesting thing I've noticed that if styles are not declared in main.css
like this one
.social-icons ul{
margin-left: 0;
}
Is applied from this 768px query, but if style is declared in main.css it is not applied, but only from 768px query.
But if I move all these media queries styles to the bottom of the main.css everything works perfectly.
I have no idea what to do .. I have spent a lot of hours trying to find the solution for this 768px media query.
You are using double slash // for comments inside 768px media query. This is not valid in CSS where the comments must be writed like this: /* comment */
You get a CSS syntax error and the block of code is not executed.
Related
I am trying to use Preact of my existing application in react
#media only screen and (min-width: 320px) and (max-width: 768px)
{
.card {
margin-top: 12px;
}
.card-body {
padding: 12px;
}
}
But css are not reflecting in Preact it was taking the default styles of website styles.
No specific document found.
Please let me know how it works.
Thanks in advance.
This is probably a question about preact-cli, not Preact itself.
If so, I'd guess the CSS file is being treated as a CSS Module, which will prefix any classNames (and requires reflecting this in your source). As a workaround, try:
:global {
#media only screen and (min-width: 320px) and (max-width: 768px)
{
.card {
margin-top: 12px;
}
.card-body {
padding: 12px;
}
}
}
I am trying to give different background images for different screen sizes. The background-image should be visible completely. I tried this solution enter link description here but it's not working out.
Firstly, how to give height property for different screen sizes and what are image sizes applied to mobile screen, tablet screen and desktop screen.
.miracle {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-image: url(https://i.postimg.cc/Y0sWXBXs/Anti-Aging-1280x712.jpg);
}
/*--For mobile devices--*/
#media (max-width: 480px) {
.miracle {
background-image: url(https://i.postimg.cc/T3Wr4hvq/Anti-Aging-768x600.jpg);
}
}
/*-----For tablets: ---------------*/
#media (min-width: 481px) and (max-width: 1024px) {
.miracle {
background-image: url(https://i.postimg.cc/T3Wr4hvq/Anti-Aging-768x600.jpg);
}
}
/*-----For desktop devices ------*/
#media (min-width: 1025px) {
.miracle {
background-image: url(https://i.postimg.cc/Y0sWXBXs/Anti-Aging-1280x712.jpg);
}
}
<div class="miracle"></div>
For an article that is written in 2020 the approach does not make sense in a few ways. Not trying to talk bad about the author but here is the thing.
1.
You should have a mobile first thinking so your first background-image should be for mobile, so your first media query should be for the next size and so on,
example: keep in mind the first is mobile
.miracle {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-image: url();
}
/* next size - tablet */
#media (min-width: 768px) {
.miracle {
background-image: url();
}
}
/* next size - tablet landscape and it covers desktop */
#media (min-width: 1024px) {
.miracle {
background-image: url();
}
}
/* next size - larger desktops */
#media (min-width: 1280px) {
.miracle {
background-image: url();
}
}
as for the height it depends if miracle is your main container or it has a parent that controls the height. If it is your main you add heights to .miracle, two examples here.
.miracle {
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-image: url();
height: 280px;
}
/* next size - tablet */
#media (min-width: 768px) {
.miracle {
background-image: url();
height: 380px;
}
}
Use object-fit on the image tag instead of background-image. That way you can get the same effect as an background-image with the benefits of the image tag. My example also takes advantage of srcset meaning you can set all the images you want for breakpoints and the browser will take care of it. Browser support for object-fit is great, of cause IE is the problem, if you need the support for that, not to worry my example has polyfill that handles that (a javascript).
if ("objectFit" in document.documentElement.style === false) {
const images = document.querySelectorAll(".background-images");
for (let image of images) {
const parent = image.closest();
const objectFitType = getComputedStyle(image).objectFit;
if (parent !== null) {
parent.style.backgroundImage = `url(${image.src})`;
parent.style.backgroundSize = objectFitType;
parent.classList.add("no-object-fit");
}
}
}
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
background-color: #040A19;
}
.hero {
position: relative;
display: flex;
align-items: flex-start;
justify-content: flex-start;
background-color: #ededed;
padding: 2rem;
margin: 2rem;
height: 40rem;
overflow: hidden;
border: .5rem solid #ffffff;
}
.hero__headline {
position: relative;
z-index: 10;
display: inline-block;
font-size: 2rem;
color: #090909;
background-color: #ffffff;
padding: 1rem;
}
.hero__images {
position: absolute;
top: 0;
left: 0;
display: block;
object-fit: cover;
object-position: center;
width: 100%;
height: 100%;
}
.use-content {
padding: 2rem;
margin-right: 2rem;
margin-bottom: 2rem;
margin-left: 2rem;
background-color: #263749;
color: #ffffff;
}
.use-content__headline {
margin: 0 0 1.6rem 0;
}
.use-content__list {
padding: 0;
margin: 0 0 0 1rem;
}
.use-content__list li {
margin-bottom: .5rem;
&:last-child {
margin-bottom: 0;
}
}
pre {
display: inline-block;
padding: .25rem;
margin: 0 .2rem;
background-color: #0E1828;
}
<div class="hero image-parent">
<div class="hero__headline">Audi e-tron GT</div>
<img class="hero__images background-images"
sizes="(max-width: 2121px) 100vw, 2121px"
srcset="
https://source.unsplash.com/cpTecdXH3q8/600x700/ 600w,
https://source.unsplash.com/cpTecdXH3q8/994x700/ 994w,
https://source.unsplash.com/cpTecdXH3q8/1305x700/ 1305w,
https://source.unsplash.com/cpTecdXH3q8/1569x700/ 1569w,
https://source.unsplash.com/cpTecdXH3q8/1805x700/ 1805w,
https://source.unsplash.com/cpTecdXH3q8/2038x700/ 2038w"
src="https://source.unsplash.com/cpTecdXH3q8/1805x700/"
alt="the awesome building">
</div>
<div class="use-content">
<h2 class="use-content__headline">How it works</h2>
<ul class="use-content__list">
<li>Using <pre>srcset</pre> instead of divs</li>
<li>Using <pre>object-fit: [type];</pre> so the image can act as <pre>background-image</pre></li>
<li>Polyfill is a script that checkes if <pre>object-fit</pre> is supported, if not, it will take the image and place it on its parent as <pre>background-image</pre> with the same cover type as the image</li>
</ul>
</div>
3.
3.a: Use srcset on image, link
3.b: Use picture, link
You need to give height:100%; for image like mentioned below,
html, body, .miracle {
height: 100%;
}
if you check in this reference example they give us an example so you can check link
Example
i am trying to hide my header logo on mobile so i put the following code in my css but it did not work,
someone tel me which code should i put in css or which directory of chamilo LMS?
#media only screen and (max-width: 568px)
div#logo {
display: none;
}
}
There is no id called logo in your html. Try this instead:
#media only screen and (max-width: 568px) {
.logo {
display: none;
}
}
I was working on this site.Please check the link http://mrsinghcafe.com/real/
It has a slider on home page with text.In small resolutions the slider appears but without Text
I want text also to appear on small resolutions.
I tried adding the following to my css
#slidecaption
{
display:block;
}
.slide_text
{
display:block;
}
but didn't help.Can some one please help me .Thanks.!!
The display:none; of the #div1content is responsible here:
#media only screen and (max-width: 767px) {
#div1content{ display:none;}
}
Remove it and position the text how you like it.
found this in your CSS:
#media only screen and (max-width: 767px) {
#slidecaption {
...
}
.slide_text {
display: none;
}
#slidecaption h2 {
...
}
}
.slide_text is display: none, and after this rule, no rule to set it to block again.
in slider_text_n_desription.css, you will find above rule. overrule it a bit down by adding display: block
#media only screen and (max-width: 479px) {
.slide_text {
bottom: 120px;
font-family: 'Eurostile-Normal';
font-size: 12px;
margin-left: 10%;
position: absolute;
display: block;
}
}
#slidecaption
{
display:block;
}
.slide_text
{
display:block;
}
use semicolones
By using media query I would like to show the last element of the following list (2) when the screen width is above 768px.
Here is the jsfiddle like.
Here is the basic css code (1).
(1)
#media only screen and (min-width: 480px) {
.menu li.hide{
visibility: none;
}
}
#media only screen and (min-width: 768px) {
.menu li.hide{
visibility: visible;
}
}
(2)
<ul class="menu">
<li>One</li>
<li class='hide'>Nine</li>
</ul>
Try this - DEMO
#media only screen and (max-width: 768px) {
body{
background:#030;
}
.menu li{
font:12px Verdana;
width:100px;
padding-left:10px;
}
.menu li:last-child{
display: none
}
}
#media only screen and (min-width: 769px) {
body{
background: honeydew;
}
.menu li{
font:22px Verdana;
width:200px;
padding-left:20px;
}
}
You can set the min and max width on the media query:
#media screen and (min-width: 480px) and (max-width: 768px) {
I've updated your jsfiddle: http://jsfiddle.net/yyQ5u/28/
It looks like the main problem was with the order of things and the actual media queries. I put your non-conditional CSS at the top of the CSS pane and the media queries below.
Then I tweaked the media queries which seemed to sort of cover each other:
#media only screen and (max-width: 768px) {
and
#media only screen and (min-width: 768px) {