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!
Related
In mobile view the navigation is all stacked up rather than in a line like the desktop template.
I would like the menu to be horizontal, the same way the desktop menu is, so it isn't taking up so much space.
/*************************************************
* Mobile Portrait *
*************************************************/
body {
overflow-x: hidden;
}
img {
max-width: 100%;
height:auto;
}
iframe {
max-width: 100%;
}
#media (max-width: 480px) {
.subscribe-box .block, .container {
width: 300px;
}
}
#media only screen and (max-width: 480px) {
.subscribe-box .block,.container {
width:320px;
}
.background-slider {
height: 320px !important;
}
#top-search{display:none}
#top-social {
float: right;
position: absolute;
z-index: 999999999999999;
right: 0;
}
#navigation-wrapper {
display:none;
}
.slicknav_menu {
display:block;
}
#logo img {
max-width:320px;
height:auto;
}
Are You asking for Menu in horizontal style.
If you are asking for horizontal menus style then you should search for Fletro menu in Google you will get a lot tutorial for that.
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"/>
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
Hi am using 2 media queries and they don't appear to work when viewed on tablet or phone, the original css still appears to override. i would like 2 blocks one under the other for tablet and phone view rather than the inline side by side on desktop view
original
.site-logo {
float:left;
display:inline-block;
width: 60%;
vertical-align: top;
}
img.logo {
height:auto;
width:auto;
}
.header-search {
float:right;
display:inline-block;
width: 40%;
vertical-align: top;
margin-top:2%;
}
media
/* Tablet */
#media only screen and (min-width: 768px) {
.site-logo {
display:block;
width: 100%;
margin: 0 auto;
}
img.logo
{
height:auto;
width:auto;
margin: 0 auto;
}
.header-search
{
display:block;
width: 100%;
margin: 0 auto;
}
}
/* Mobile */
#media only screen and (min-device-width: 480px) {
.site-logo
{
display:block;
width: 100%;
margin: 0 auto;
}
img.logo
{
height:auto;
width:auto;
margin: 0 auto;
}
.header-search {
display:block;
width: 100%;
margin: 0 auto;
}
}
link to site: Photohunters
Thank you
Melanie
Update
Have tried again but no go!
.site-logo {
float:left;
display:inline-block;
width: 60%;
vertical-align: top;
}
img.logo {
height:auto;
width:auto;
}
.header-search {
float:right;
display:inline-block;
width: 40%;
vertical-align: top;
margin-top:2%;
}
/* Tablet */
#media only screen and (min-width: 720px) and (max-width: 800px) {
}
/* Mobile */
#media only screen and (min-width: 480px) and (max-width: 719px) {
#sidebar { display:none; }
#sidebar-profile { display:none; }
#site-content-left {
width: 95%;
margin:0 auto;
}
.site-logo {
display:block;
width: 100%;
margin: 0 auto;
}
img.logo
{
height:auto;
width:auto;
margin: 0 auto;
}
.header-search {
display:block;
width: 100%;
margin: 0 auto;
}
}
/* Mobile - 320px */
#media only screen and (min-width: 300px) and (max-width: 479px) {
#sidebar {display:none;}
#sidebar-profile {display:none;}
#site-content-left {
width: 95%;
margin:0 auto;
}
.site-logo
{
display:block;
width: 100%;
margin: 0 auto;
}
img.logo
{
height:auto; width:auto; margin: 0 auto;
}
.header-search
{
display:block;
width: 100%;
margin: 0 auto;
}
}
html as requested
`<meta name="viewport" content="width=device-width" />
<div id="wrap">
<div class="site-logo"> <img class="logo" src="<?php echo get_stylesheet_directory_uri(); ? >/images/logobestnewstreight300.png" alt="photohunters.org" /></div>
<div class="header-search">
<?php if (is_page('home')) { ?>
<div class="fb-share-button" data-layout="button"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href=" <?php echo get_permalink(); ?>" layout="button_count" show_faces="false" ></fb:like></div><?php } ?>
<div class="headersearchbox">
<?php $results_page = site_url().'/search-results/'; ?>
<form name="search" method="post" action="<?php echo $results_page; ?>">
`
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;
}