Hi can you guys help I am getting lost I don't know why my DIVs are not showing on on #media 414px but it's showing on 767px - 1920px. I did used scroll reveal.js I think that's the thing that affects my website. Please Help me. Thanks is advance
Here is the css below:
.products .prod4{
display:none;
}
.products .prod5{
display:none;
}
.products .prod6{
display:none;
}
.products .prod7{
display:none;
}
.products .prod8{
display:none;
}
.products .prod9{
display:none;
}
.products .prod10{
display:none;
}
.products .prod12{
display:none;
}
.products .prod13{
display:none;
}
.products .prod14{
display:none;
}
.products h2{
margin-top:-10px;
font-size:45px;
}
.products p{
margin-left:-15px;
margin-right:-55px;
margin-top:-45px;
font-size:13px;
}
.factory-caption-h1a1b span{
font-size: 110px;
margin-left:90px;
}
.products .resize-top{
margin-top:-70px;
}
.products .blackbg2{
height:350px;
background: url(../img/blackbg.jpg) no-repeat;
width:100%;
margin-left:-0px;
margin-bottom:200px;
}
.products .blackbg2 p{
color:white;
}
<div id="my-content"></div>
...
#media screen and (min-width: 0px) and (max-width: 400px) {
#my-content { display: block; } /* show it on small screens */
}
#media screen and (min-width: 401px) and (max-width: 1024px) {
#my-content { display: none; } /* hide it elsewhere */
}
Please check this link:-Div show/hide media query
Related
How can I set an image as header which is responsive?
I've tried already the Bootstrap's img-responsive class, but the height is to large on small screens.
I've tried this, but the image has each time the original size:
#media (max-height: 700px){
.img-theme {
display: block;
width:auto;
max-width:100%;
height:250px;
}
}
/* sm */
#media (min-height: 701) {
.img-theme {
display: block;
width:auto;
max-width:100%;
height:275px;
}
}
/* md */
#media (min-height: 999px) {
.img-theme {
display: block;
width:auto;
max-width:100%;
height:400px;
}
}
/* lg */
#media (min-height: 1200px) {
.img-theme {
display: block;
width: auto;
max-width:100%;
height:500px;
}
}
Try this:
.img-theme{
width: 100%;
height: auto;
max-heigth: 500px !important;
}
This should auto-resize height based on width, 100% make the image responsive of device screen width. And your image won't be taller than 500 pixels.
Here is an example:
body{
margin: 0;
}
.img-theme{
width: 100%;
height: auto;
max-height: 500px !important;
}
<img class="img-theme" src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-5.jpg">
You don't need to use media-queries... just place it in your global css file.
Don't Use Width:auto width always 100%; in any resolution now its working fine check it once
#media (max-height: 700px){
.img-theme {
display: block;
width:100%;
height:250px;
}
}
/* sm */
#media (min-height: 701) {
.img-theme {
display: block;
width:100%;
height:275px;
}
}
/* md */
#media (min-height: 999px) {
.img-theme {
display: block;
width:100%;
height:400px;
}
}
/* lg */
#media (min-height: 1200px) {
.img-theme {
display: block;
width: 100%;
height:500px;
}
}
<img src="http://cdn.wonderfulengineering.com/wp-content/uploads/2016/01/nature-wallpapers-5.jpg" class="img-theme"/>
Please take a look at my practice site - http://codepen.io/silentarrowz/pen/rLJABR
I am having few problems with it:
At reduced screen size the eElectronics and cart at the top are not centered but appear at one side of the screen. I'd like it to be centered for small screen sizes. I am able to center the eElectronics logo but unable to center the cart div, even though I am using media queries.
The navigation bar overflows for small screen sizes and the links at the end such as OTHERS & CONTACT flow on to the next row. How do I fix this?
The carousel caption moves off the screen for reduced size. How do I fix this?
Please offer your suggestions and advice.
.navcolor{
background-color:#1abc9c;
}
.logo a{
padding-bottom:10px;
color:#999;
}
.logo a span{
color:#1abc9c;
}
.cart {
border:1px solid rgb(221,221,221);
font-family:"Titillium Web";
font-size:18px;
width:140px;
height:50px;
padding-top:10px;
padding-left:10px;
}
.cart a{
color:#666;
}
.cart a span{
color:#1abc9c;
font-weight:bold;
}
.cart:hover {
background-color : #1abc9c;
}
.cart:hover span, .cart:hover a{
color:white;
}
.no-underline :hover{
text-decoration:none;
}
.navbar-default .navbar-menu{
height:50px;
}
.navbar-default .navbar-menu li > a{
color:white;
font-weight:bold;
font-size:14px;
}
.navbar-default .navbar-menu > .active > a {
background-color:#333;
color:white;
}
.navbar-default .navbar-menu > .active > a:hover {
background-color:#333;
color:white;
}
.navbar-default .navbar-menu li>a:hover{
background-color:#333;
color:white;
}
#carousel1 img{
width:100%;
height:70%;
}
.logo{
font-family:"Titillium Web";
font-size:40px;
}
.cart{
font-size:18px;
}
.carouse-inner{
position:relative;
}
.carousel-caption{
background-color:rgba(0,0,0,0.5);
color:white;
display:block;
width:600px;
padding-left:20px;
text-align:left;
position:absolute;
left:600px;
bottom:150px;
}
.latest img{
border:1px solid grey;
}
.details p{
height:150px;
display:block;
border:1px solid #17a78b;
margin-top:30px;
margin-bottom:30px;
padding-top:10px;
padding-bottom:10px;
font-size: 30px;
font-weight:200;
color:#fff;
text-align:center;
}
.details p:hover{
background-color:black;
}
.details p>i{
font-size:50px;
font-weight:500;
}
.details{
background-color:rgb(26,188,156);
}
.latest{
text-align:center;
}
#media (max-width: 300px) {
.logo{
text-align:center;
}
.cart{
width:100%;
text-align: center;
}
}
#media (min-width: 501px) {
.logo {
float: left;
}
.cart {
float:right;
}
}
Problem 2: Your OTHER & CONTACT menu buttons go on the next row because your navbar is in a div.container with a width of 750px for resolutions under 768px, and there is no place for themin the same row.
#media (min-width: 768px){
.container {
width: 750px;
}
}
You could give it another class, with different width, since you have the .container class assigned to more divs, and make it wider.
You could also give a min-height of 330px to your .navbar-colapse.in class to make the collapsed menu higher when resolution is under 768px:
#media (min-width: 768px){
.navbar-collapse.in {
overflow-y: auto;
min-height: 330px;
}
}
Problem 3: As Steve said, change your .carousel-caption style, giving width in percents (100%) and margins set to auto.
.carousel-caption {
width: 100%;
left: auto;
right: auto;
}
If you are trying to center divs with text-align that's not the way to go. You need to set up margin on right and left to auto:
#media (max-width: 300px) {
.logo{
text-align: center;
margin: 0 auto;
}
.cart{
width:100%;
margin: 0 auto;
}
}
The thing is your eElectronics is not taking all the space of the div, center div with margin auto on sides and text-align center inside the div.
For the menu in collapse mode, i get a scroll bar and everything is fine except it is a little small. Override with overflow: visible; and set z-index if it overlaps under other items.
.navbar-collapse.in {
overflow-y: visible;
}
The carousel captions are fine for me on Firefox. You just need to set a width in % and set margins on each side to auto. That div needs to be adaptative. Right now it stay at a size of 600px set in .carousel-caption.
So I want the divider line on the picture to decrease or increase in size based on the All publications link. Currently I have done it like this, but I'm wondering if there's a better solution for this?
#media (max-width: 767px) {
.dividing .col-xs-6 {
width:75%;
}
}
#media (max-width: 600px) {
.dividing .col-xs-6 {
width:65%;
}
}
#media (max-width: 423px) {
.dividing .col-xs-6 {
width:55%;
}
}
You could use a :before element:
h2{
margin: auto;
margin-top: 2em;
text-align: right;
display: flex;
align-items: center;
color: #34495e;
padding-bottom: 1em;
}
h2:before{
content: '';
flex: 1 0 0;
margin-right: 0.25em;
height: 2px;
background: #34495e;
}
<h2>Test</h2>
I have the following media screen queries which work on local browser as xml, but it does not seem to work in blogspot:
/* for 1024px or less */
#media screen and (max-width: 1024px){
#wrapper {
width:100%;
float:none;
}
#header-wrapper {
width:100%;
}
#navigation {
width:100%;
font-size:0.7em;
}
#content-wrapper{
width:63.8%;
float:left;
}
#sidebar-wrapper{
margin-left:0.5%;
width:34%;
float:left;
}
#footer-wrapper{
width:100%;
float:left;
}
}
/* for 700px or less */
#media screen and (max-width: 700px) {
#content-wrapper {
width: auto;
float: none;
}
#sidebar-wrapper {
width: auto;
float: none;
}
}
These work on local browser (firefox), but when I implemented them on blogger, the media queries won't work when I tried to change the width of the browser by zooming it out.
I had added the meta viewport code as well, but still not work.
<meta content='width=device-width,initial-scale=1.0,minimum-scale=0.5,maximum-scale=2.0' name='viewport'/>
Any ideas? great thanks!
*Addition:
This code also resulted broken view:
#navigation{
background-color: #5F5F5F;
margin-top: -25px;
}
#navigation ul{
margin-left:-40px;
}
#navigation ul li{
display:inline-block;
padding-right: 10px;
padding-top:10px;
padding-bottom:10px;
}
#navigation ul li:hover{
background-color:#000000;
}
#navigation ul li a{
text-decoration:none;
color:white;
font-family:calibri;
padding-left:10px;
}
Check this link : http://www.fiveforblogger.com/2012/01/fun-with-css-media-queries-in-blogger.html
<meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0' name='viewport'/>
...
#media only screen and (min-width: 768px) and (max-width: 1023px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#page-wrapper
{ width: 800px; }
#side-wrapper
{ position: relative; float: left; top: 0px; margin-top: 20px; width: auto; }
...
...
}
#media only screen and (min-width: 500px) and (max-width: 767px) {
#page-wrapper
{ width: 640px; }
.menu, #logo img
{ width: 100%; }
...
...
}
Looks like the problem is the comment tag . Maybe blogger doesn't support this comment writing style. Now the problem is solved since I got rid of them!
I have a grid of thumbnails:
.thumbnail-container {
border: 1px solid red;
float: left;
width: 25%; (depending on screen size)
}
.thumbnail {
display: block;
height: auto;
width: 200px;
margin: 0 auto;
padding: 0px;
}
you get the idea...
Sometimes there are 5 thumbs, sometimes 4, 3, 2... in the same row depending on the #media device screen width.
So as you can see in the picture, my problem is the horizontal spacing between the thumbnails. Since the width of each thumb-container is equal (25% in the picture) and thumbnails are centered, there is double spacing betwet 1st and 2nd, 2nd-3d, 3rd-4th. On the contrary, the 1st thumb has half of that space to the left, and the 4th has it to the right:
It's like this: 1(A)2(B)2(C)2(D)1
And I want it like this: 1(A)1(B)1(C)1(D)1
Any ideas of how to make the spacing the same?
Many thanks!
I made this responsive grid that does what you need using CSS.
It uses media queries and nth-child().
The horizontal and vertical margins are equal.
FIDDLE
It shows you can use calculation to position grid elements with equal margins between each other. The margin between elements and window is also the same.
Code for screens wider than 751px isn't written yet though but you get the idea. Here is the code :
HTML :
<div id="container">
<div class="wrap">
<div class="foto">1</div>
</div>
<div class="wrap">
<div class="foto">2</div>
</div>
<div class="wrap">
<div class="foto">3</div>
</div>
... And so on ...
</div>
CSS :
html, body {
margin:0;
padding:0;
min-width:150px;
}
.wrap {
float:left;
position:relative;
}
.foto {
width: 150px;
height: 150px;
background: gold;
position:absolute;
}
#warning{display:none;}
#media screen and (min-width: 631px) {
.wrap {
width:20%;
padding-bottom:25%;
}
.wrap:nth-child(4n+2), .wrap:nth-child(4n+3){
}
.wrap .foto {
top:-75px;
margin-top:100%;
right:-30px;
}
.wrap:nth-child(4n+2){
margin:0 5% 0 7.5%;
}
.wrap:nth-child(4n+3){
margin-right:7.5%;
}
.wrap:nth-child(4n+2) .foto{
left:50%;
margin-left:-75px;
}
.wrap:nth-child(4n+3) .foto{
right:50%;
margin-right:-75px;
}
.wrap:nth-child(4n) .foto{
left:-30px;
}
#container{
margin-top:-45px;
}
}
#media screen and (min-width: 481px) and (max-width: 631px) {
.wrap {
width:25%;
padding-bottom:33.3%;
}
.wrap:nth-child(3n+2){
margin:0 12.5%;
}
.wrap .foto {
top:-75px;
margin-top:100%;
right:-37px;
}
.wrap:nth-child(3n+2) .foto{
left:50%;
margin-left:-75px;
}
.wrap:nth-child(3n) .foto{
left:-37px;
}
#container{
margin-top:-37px;
}
}
#media screen and (min-width: 331px) and (max-width: 480px) {
.wrap {
width:33.3%;
padding-bottom:50%;
clear:left;
}
.wrap:nth-child(even) {
float:right;
clear:right;
}
.wrap .foto {
top:-75px;
margin-top:100%;
right:-50px;
}
.wrap:nth-child(even) .foto {
left:-50px;
}
.wrap:nth-child(4n+3) .foto, .wrap:nth-child(4n+4) .foto {
bottom:-75px;
margin-bottom:100%;
}
#container{
margin-top:-25px;
}
}
#media screen and (max-width: 330px) {
.wrap {
width:50%;
padding-bottom:100%;
clear:left;
}
.wrap:nth-child(odd) .foto {
right:-75px;
bottom:0;
bottom:-75px;
margin-bottom:100%;
}
.wrap:nth-child(even) .foto {
top:0px;
right:-75px;
top:-75px;
margin-top:100%;
}
}
#media screen and (min-width: 751px) {
#warning{
color:#fff;
display:block;
position:fixed;
width:100%;
height:50%;
top:25%;
left:0;
background:#000;
text-align:center;
font-size:30px;
}