I am trying to fix my mobile nav bar so it will be fixed and background will show all the time, (it's currently taking styling from the main nav for desktop which is transparent)
#media (max-width: 600px) {#navbar {position:fixed; background-color: #383736;}
This code is currently not working, can anyone help please?
Thanks
You are missing the property :
top: 0;
In your css
A html element with id navbar doesn´t exist in your code
#media (max-width: 600px) {
.main-header__inner {
position:fixed;
background-color: #383736;
}
}
Solved on the page you linked with:
#media (max-width: 600px) {
header{
position: fixed;
z-index: 2;
width: 100%;
}
}
Related
At https://www.sfwatertaxi.net, any suggestions why the spacing underneath the footer navigation items is disproportionately large on mobile devices?
Below is the code used to create footer navigation columns on mobile.
ul.nav {
column-count: 3;
display: inline-block;
}
I just inspected your footer CSS code and found out that you have this code:
#media (max-width: 767px)
.gh-foot {
padding-bottom: 160px;
padding-top: 64px;
}
Maybe it's because of a custom library component.
To FIX IT, you can add something like this to your code:
.gh-foot {
padding-bottom: 90px !Important;
}
If you want to manage the spacing just on mobile, you can use this instead:
#media (max-width: 767px) {
.gh-foot {
padding-bottom: 90px !Important;
}
}
I have a web app and I want for mobile only to remove the scroll bar from body element.
i have tried with
#media only screen and (max-width: 500px) {
body {
overflow-y: hidden;
}
}
but nothing happend, the css property is not applied;
How can I set the scroll hidden only on mobile?
Guess you will need to add more details because it's working as expected (resize your browser to see it or check this jsfiddle):
body {
height: 2000px;
}
#media only screen and (max-width: 500px) {
body {
background-color: red;
overflow-y: hidden;
}
}
I am using a WordPress theme called Spacious. I have set a site logo but I can't seem to make the logo responsive. The logo only responds to certain media queries, but none for mobile screen sizes.
I changed the site logo's location from the center below the header to over the header to the left. I think that this may be the issue but I'm not sure. Am I doing something wrong? How can I go about making my logo responsive? The link to my site is: davenport.ryannemurphy.com. The CSS code I am using for the logo is below:
#media only screen and (max-width: 600px) {
.custom-logo {margin-top: 25px;
position: absolute;}
#media only screen and (max-width: 768px) {.header-image {height: 100px;}
.custom-logo {width: 50%;
margin-top: -20px;
}
}
#media only screen and (max-width: 900px) {
.custom-logo {width: 50%;
position: relative;}
}
#media only screen and (max-width: 1100px){
.custom-logo {width: 50%;
margin-top: -20px;
position: relative;
}
}
#media only screen and (max-width: 1500px){.custom-logo{margin-left: 100px;}}
#media only screen and (max-width: 1650px){.custom-logo {margin: 30px; }}
#media only screen (min-width: 1651px) and (max-width: 1850px){.custom-logo {width: 90%;}}
#media only screen and (max-width: 1950px){
.custom-logo {margin-left: -100px;
margin-top: -98px;
position: absolute;}
}
I believe you're missing a closing bracket ("}") in line 3 in the CSS you attached.
Use an online CSS formatter (for example, https://www.cleancss.com/css-beautify/) to format your CSS code and you'll see that most of your media queries are actually below the first one in hierarchy because of that missing curly bracket.
Not sure this is causing the issue, but it's definitely something that can confuse the browsers and cause bugs.
I was having the same problem in Sinatra theme.
I ended up using just width and height but I had to put !important after each.
Here is the css I used:
#media screen and (max-width: 960px) {
img[itemprop="logo"] {
width: 281px !important;
height: 145px !important;
}
}
You have an < img width="450" height="92" .../> hardcoded into your html. I think you need to remove the height and width attributes on the img tag.
I'm creating a fluid layout for a site. I'm trying to hide the contents of a <div> or the whole <div> itself in the mobile view, but not the tablet and desktop view.
Here's what I've got so far...
#title_message {
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
I have the display set to 'none' for the mobile layout and set as block on the tablet/desktop layouts... Is there an easier way to do that, or is that it?
You will need two things. The first is #media screen to activate the specific code at a certain screen size, used for responsive design. The second is the use of the visibility: hidden attribute. Once the browser/screen reaches 600pixels then #title_message will become hidden.
#media screen and (max-width: 600px) {
#title_message {
visibility: hidden;
clear: both;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
display: none;
}
}
if you are using another CSS for mobile then just add the visibility: hidden; to #title_message.
Set the display property to none as the default, then use a media query to apply the desired styles to the div when the browser reaches a certain width. Replace 768px in the media query with whatever the minimum px value is where your div should be visible.
#title_message {
display: none;
}
#media screen and (min-width: 768px) {
#title_message {
clear: both;
display: block;
float: left;
margin: 10px auto 5px 20px;
width: 28%;
}
}
The solution given didn't work for me on the desktop, it just showed both divs, although the mobile only showed the mobile div. So I did a little search and found the min-width option. I updated my code to the following and it works fine now :)
CSS:
#media all and (min-width: 480px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}
#media all and (max-width: 479px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}
HTML:
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) { #title_message { display: none; }}
This would be for a responsive design with a single page for an iphone screen specifically. Are you actually routing to a different mobile page?
You can be guided by this example. On your css file:
.deskContent {
background-image: url(../img/big-pic.png);
width: 100%;
height: 400px;
background-repeat: no-repeat;
background-size: contain;
}
.phoneContent {
background-image: url(../img/small-pic.png);
width: 100%;
height: 100px;
background-repeat: no-repeat;
background-size: contain;
}
#media all and (max-width: 959px) {
.deskContent {display:block;}
.phoneContent {display:none;}
}
#media all and (max-width: 479px) {
.deskContent {display:none;}
.phoneContent {display:block;}
}
On your html file:
<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
i just switched positions and worked for me (showing only mobile )
<style>
.MobileContent {
display: none;
text-align:center;
}
#media screen and (max-width: 768px) {
.MobileContent {
display:block;
}
}
</style>
<div class="MobileContent"> Something </div>
Well, I think that there are simple solutions than mentioned here on this page! first of all, let's make an example:
You have 1 DIV and want to hide thas DIV on Desktop and show on Mobile (or vice versa). So, let's presume that the DIV position placed in the Head section and named as header_div.
The global code in your CSS file will be: (for the same DIV):
.header_div {
display: none;
}
#media all and (max-width: 768px){
.header_div {
display: block;
}
}
So simple and no need to make 2 div's one for desktop and the other for mobile.
Hope this helps.
Thank you.
try this
#media handheld{
#title_message { display: none; }
}
I have this CSS:
#media only screen and (max-height: 500px) {
body{
display: none;
}
}
This hides the page when it gets to 500px (just to test it), works fine in my browsers on windows PC, when I try on my MacBook Pro in Safari it doesn't seem to detect it, how can I get this to work properly? I cant find much on it on google
I tested it and it's working fine on Safari(Mac) as well.
div{
background: #ddd;
width: 300px;
height: 300px;
}
#media only screen and (max-height: 500px) {
div{
display: none;
}
}
Here's the screenshot. Though there's a bug with Safari(iPad/iPhone). You might love to read this.
That works in safari, I just tested it to make sure.
The only thing that is missing in your question is the position of that query in regards to the properties/class you would like to change.
In other words, place it at the end and it will work.
Example:
This tells the browser to hide the body when the browser height is smaller than 500px:
body {
display: block;
}
#media only screen and (max-height: 500px) {
body{
display: none;
}
}
If you had it the other way around the last body definition would make the media query useless.
#media only screen and (max-height: 500px) {
body{
display: none;
}
}
body {
display: block;
}