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.
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"/>
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!
If one adds two responsive gadgets say,
A navigation bar with a media query like this in the navigation style CSS file
#media screen and (max-width : 760px){
nav ul {
position: static;
display: none;
}
nav li {
margin-bottom: 1px;
}
nav ul li, li a {
width: 100%;
}
nav .show-menu {
display:block;
}
}
and a responsive slideshow with the media query >
#media screen and (max-width: 65.3125em) {
.description,
.tiltview {
width: 100%;
}
.tiltview {
left: 0;
opacity: 0.3;
pointer-events: none;
}
}
#media screen and (max-width: 33.75em) {
.description {
font-size: 1.1em;
}
.slideshow > nav span {
width: 20px;
height: 40px;
margin: 0 10px;
}
}
#media screen and (max-width: 24em) {
.slides {
height: 320px;
}
.description {
font-size: 1em;
padding: 1.4em;
}
.no-csstransforms3d .tiltview.col,
.no-csstransforms3d .tiltview.row {
top: 0;
}
}
My question is , when opening the website on a mobile device the responsive effect DO NOT work and the site remains fullscreen , why is that ? Is it because I have different media queries on different CSS sheets with different widths ?
Have you tried adding this meta tag to your head of your html page?
<meta name="viewport" content="width=device-width, initial-scale=1">
#media is giving me some problems... I can' seem to figure out how to get it to work. I would like to show the scrollbars if the height/width matches the query.
Here is what I have tried :
.content {
width: 600px;
height: 600px;
background: red;
}
#media all and (max-width: 500px) {
body{
overflow-x: visible;
}
}
#media all and (max-height: 500px) {
body{
overflow-y: visible;
}
}
body {
overflow: hidden;
}
and the fiddle: http://jsfiddle.net/Ln4tg3ct/
Either put your #media rules last in the order or make them more specific. E.g. either this:
body {
overflow: hidden;
}
#media all and (max-width: 500px) {
body{
overflow-x: visible;
}
}
#media all and (max-height: 500px) {
body{
overflow-y: visible;
}
}
or this
#media all and (max-width: 500px) {
html body{
overflow-x: visible;
}
}
#media all and (max-height: 500px) {
html body{
overflow-y: visible;
}
}
body {
overflow: hidden;
}
Make sure that your body style is listed before the media queries. Instead of using visible use scroll. In your JSFiddle, try this:
.content {
width: 600px;
height: 600px;
background: red;
}
body {
overflow: hidden;
}
#media all and (max-width: 500px) {
body{
overflow-x: scroll;
}
}
#media all and (max-height: 500px) {
body{
overflow-y: scroll;
}
}
by default, the scrollbar is visible in all. did you hide it in global CSS or something?
even on mobile, it's still visible but it's small and shows when you scroll then hides automatically.
anyway, I did the opposite to hide scrollbar #media. I tried the following on Firefox, Opera, and Chrome. work fine:
#media only screen and (max-width: 975px) {
/* hide scrollbar on Firefox */
html {
scrollbar-width: none;
}
/* hide scrollbar on Chrom & Opera */
html::-webkit-scrollbar {
display: none;
width: 0px;
}
When using brackets to code my website, the #media worked and would make divs appear and disappear to support mobile screens. But after uploading to my hosting site, it does not work and all the elements are showing at once. How can I fix this? The relevant CSS code is below.
CSS:
#media (max-width : 720px) {
.disappear {
display: none;
}
#menuposition {
margin-left: auto;
margin-right: auto;
}
.galleryitem {
width: 100%
}
.containergallery {
max-width: 250px;
padding-top: 0%;
}
}
#media (min-width : 721px) {
.reappear {
display: none;
}
#menuposition {
right: 0px;
position: absolute;
}
}
#media (max-width : 960px) {
.galleryitem {
width:100%
}
.containergallery {
max-width: 300px;
padding-top: 10px;
}
}
That page you linked to doesn't have that CSS in the source anywhere and none of the linked files have it either.
Link the CSS to the page or place it in an inline-style element.