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
Related
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;
}
}
the task is to show different components based on the device width;
I've come up with two variants:
write a React Component which will take several components, on each width (sm, md, xl). It'll automatically check the device width and render only one component based on the width. (example)
<DeviceChecker>
<Desktop>
<List/>
</Desktop>
<Mobile>
<Carousel/>
</Mobile>
</DeviceChecker>
What I don't like in this approach is checking the width on window resize event.
Write both components in React but using CSS media queries show or hide each, like this:
<div>
<Carousel className="sm" />
<List className="md" />
</div>
what I don't like in this case is that React will actually render both components but one of them will be simple hidden
I know how to implement both variants, but the question is Which one is correct way to write Responsive Layouts for React Applications?
#media only screen and (min-width: 768px) {
section.dashboard .slick-list .slick-track {
display: flex;
}
section.dashboard .slick-list .slide {
opacity: 1;
}
header .wrapper .article h1 span.arrow {
display:none;
}
header .wrapper .article .description {
max-height: 300px
}
}
#media only screen and (min-width: 1024px) {
.container header .wrapper {
text-align:left;
margin-left:5%;
width:480px;
}
.container header .header-nav-area #nav_container {
display:flex;
}
.container header form {
display:block;
}
.container header .menu-icon {
display:none;
}
header .wrapper .article footer {
display: block;
}
section.dashboard .slick-list .slick-track {
display: flex;
min-width: 309px;
padding: 20px;
}
section.dashboard .slick-list .slick-track[index="2"] {
display: flex;
}
section.dashboard .slick-list .slide {
opacity: 1;
}
}
For more detail visit;
https://itnext.io/3-ways-to-implement-responsive-design-in-your-react-app-bcb6ee7eb424
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.
I have a bug in my header when I shrink the screen size down. The nav is supposed to disappear (only to reappear if the mobile nav icon is clicked,) which is working fine. However, if I click the mobile nav icon, and then click it again to hide it, the nav stays hidden even when I expand the screen size out again.
I want the nav to show up again when the screen gets to 670px.
CSS
#media screen and (min-width: 671px) {
.nav {
display: block;
}
}
#media screen and (max-width: 670px) {
.navicon {
display: block;
}
.homeiconcontainers {
float: none;
width: 100%;
}
.header {
background: none;
opacity: 1;
}
.pagelinkcontainers {
float: none;
line-height: 50px;
background-color: black;
width: 200px;
padding-right: 0px;
text-align: center;
}
ul {
padding-left: 20px;
}
.nav {
display: none;
}
}
JavaScript
// Show Mobile Navbar Onclick
function MobileMenu (object) {
var elements={"nav":{title: "nav"}};
var mobiledisplay = window.getComputedStyle(document.getElementById("nav")).display;
//Show nav element
for(var nav in elements) {
if(object!==nav) {
document.getElementById(nav).style.display='none';
}
if(object==nav && mobiledisplay=='block') {
document.getElementById(nav).style.display='none';
}
else {
document.getElementById(nav).style.display='block';
location.hash=pages[nav].title;
document.title=pages[nav].title;
}
}
}
My .nav is somehow getting display: none from either my 670px media query, or from the javascript function. I could also be mis-using the min-width media query, but I'm not sure.
Im assuming you don't need to see my HTML to figure this out, but if you would like to, let me know.
Now CSS takes precedence over the JavaScript inline styling forcing the nav bar to be visible.
#media screen and (min-width: 671px) {
.nav {
display: block !important;
}
Why?
JavaScript code setting inline styling wins from CSS styling. Or better said always takes priority to CSS rules except when that CSS rule has !important.
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;
}
}