Media queries are not reflecting while using Preact - javascript

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;
}
}
}

Related

Top level media queries with styled-components?

I'm currently in the process of migrating from plain scss/sass to styled-components in my react site in progress!
However, I was wondering if there's any way to add top-level media queries (if that's the right way to describe them). Here's what I'm talking about:
/* Large screens */
#media only screen and (min-width: 600px) {
.navbar {
top: 0;
width: 5rem;
height: 100vh;
&:hover {
width: 16rem;
.link-text {
display: inline;
}
.logo svg {
margin-left: 11rem;
}
.logo-text {
left: 0px;
}
}
}
}
As far as I can tell, I would need to add media queries inside each styled-component component with the styles that I would want to change. However, I feel that having queries like this would be more organized.
Is there any way to get media queries like this using styled-components? Any help would be massively appreciated!
I usually create a global style for media. There I put my top level media queries.
import { createGlobalStyle } from "styled-components";
export default createGlobalStyle`
* {
margin: 0;
padding: 0;
outline: 0;
box-sizing: border-box;
}
#media(max-width: 800px) {
flex-direction: column;
position: relative;
}
`;

Hide Header Logo on Mobile in Chamilo LMS

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;
}
}

Weird behavior of Media Queries

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.

Text not showing in mobile view

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

FullCalendar.js adjust header for mobile

I am using responsive styling in a project that uses the fullcalendar.js.
Unfortunately, I can't get the style of the header (fc-header-left, fc-header-center, fc-header-right) to stack on each other when in mobile view.
For example... in desktop view it looks like...
fc-header-left fc-header-center fc-header-right
When mobile I would like the 3 parts of the header to stack on top of each other.
fc-header-left
fc-header-center
fc-header-right
I have tried to override these headers with negative margins, floats and all kinds of things but I can't get these headers to stack.
Does anyone know how I can get the header parts to stack on each other in mobile view?
Thanks
This worked for me with the newest version. Check done using screen width.
#media (max-width: 768px){
.fc-toolbar .fc-left, .fc-toolbar .fc-center, .fc-toolbar .fc-right {
display: inline-block;
float: none !important;
}
}
For Fullcalendar v5
#media (max-width: 767.98px) {
.fc .fc-toolbar.fc-header-toolbar {
display: block;
text-align: center;
}
.fc-header-toolbar .fc-toolbar-chunk {
display: block;
}
}
Give each of them a width:100%; and display:block; that should do the trick.
At least I was able to get the demo one on teh fullcalendar.js website to do that.
You will then have to align them as you see fit.
.fc-header-left, fc-header-center, fc-header-right {
width: 100%;
display: block;
}
The version I am working with uses flexbox. This is what works for me,
.fc-toolbar {
.fc-center h2 {
font-size: 1.25em
}
display: block;
text-align: center;
#media (min-width: 600px) {
display: flex;
}
}

Categories