My footer is absolutely fine on a normal screen size but I want it to become invisible when I shrink the screen after a certain height.Any ideas how to do it without using javascript?My HTML and CSS snippets are as follows:
HTML:
<footer class="footer">
About
</footer>
CSS:
.footer{
position: fixed;
bottom: 0;
margin: 0;
padding: 10px;
width: 100%;
box-shadow: 0 0 3px white;
color:white;
}
jsFiddle Demo
Use a max height media query on your page in order to hide the footer. Note that this is compatible in almost all browsers, except IE8-.
html for demo
<div id="footer">Footer</div>
css
#media (max-height:150px) {
#footer{
display:none;
}
}
Use this:
#media screen and (max-width: 500px) {
.footer {
display: none;
}
}
DEMO and Source
Try a media query in your css document like so:
media screen and (max-height:700px) {
.footer {
display:none;
}
}
Media queries take a lot of different arguments, i.e. min-height, min and max width, etc. Mozilla dev covers the operators with great examples.
Related
I have the following simple HTML and CSS code with media queries which you can also find in the JSfiddle here:
/* Screenwidth as variable */
:root {
--min-width: 1041px;
}
/* homepage */
#media screen and (min-width:1041px){
.homepage {
height: 500px;
width: 400px;
}
}
#media screen and (max-width:1040px){
.homepage {
height: 300px;
width: 100px;
}
}
/* faq */
#media screen and (min-width:1041px){
.faq {
height: 800px;
width: 600px;
}
}
#media screen and (max-width:1040px){
.faq {
height: 700px;
width: 550px;
}
}
<div class="homepage">
Here goes content of homepage.
</div>
<div class="faq">
Here goes content of faq.
</div>
As you can see in the code I will have different pages on my website and they should have a different size depending on the device that is accessing the website. The media queries itself work perfectly already.
However, since I will have a lot of those media queries within in my CSS and I might want to change them to different sizes to test and try things it would be great to have the min-width and the max-width as variable within the :root part of the CSS.
Do you know if this is even possible and if yes how I have to change my code to make it work?
No, you can't use the css native variables in media query.
The :root, that is the element is a top-level parent. The other child elements can inherit from the root but the media query is not an element,
This can't be done through css.
you can use preprocessors like sass to accomplish this.
I know this is a simple fix, but I am clueless on how to actually fix the problem. It's weird. On the desktop version, my logo is smaller than I want it to be because on the mobile it gets way too big.
Here is my css code:
#logo{
height:380%;
margin-top: -35px;
}
And here is my meta tag for other devices:
<meta name="viewport" content="width=device-width, initial-scale=1">
I also researched a bit and saw that I need an #media? Also here is the picture:
Here is my full css code as requested:
.navbar-text pull-left{
color:#000000;
text-decoration:none;
}
.navbar-text p{
color:inherit;
text-decoration:none;
}
.navbar{
border: 0px;
}
#logo{
height:500%;
margin-top: -35px;
}
#media only screen and (min-width: 640px) {
#logo {
height:150%; // Change this value
margin-top: -35px;
}
}
You can implement the equivalent of max-font-size with media queries
The idea is relatively simple.
You set the font size to 20vw - read about vw here - since it's
a logo.
you overwrite the font-size with a fixed size once the viewer size
exceeds a certain point - 450px in my example below.
The end result is that your font will adjust to the screen size and will be responsive.
Working example:
#logo {
font-size: 20vw;
text-align: center;
}
#media screen and (min-width: 450px) {
#logo {
font-size: 83px;
}
}
<div id="logo">"Quotin"</div>
Edit:
I just realized your logo is an image.
I trimmed the extra empty space off your logo in Photoshop because that's a lot easier than messing with negative margins in this case.
This should work on both mobile and desktop screens and be responsive without needing media queries
Working Example:
#logo {
margin: 0 auto;
max-width: 100%;
width: auto;
height: auto;
display: block;
}
<a class="navbar-brand" href="http://www.quotin.co"><img class="img-responsive" id="logo" src="https://image.ibb.co/dTt4xv/8DL1n.png"></a>
I would replace 380% by a size in either pixel or rem.
Mobile screens have nowadays very high pixel density. Here is a good example on how to make a responsive logo https://getflywheel.com/layout/css-sprites-make-your-logo-responsive/
CSS3 Media Query is what you should be looking for. Assuming that your desired mobile width is 640px, put the following in your CSS to display it differently on mobile view.
#media (min-width: 640px) {
#logo {
height:150%; // Change this value to adjust logo size
margin-top: -35px; // Change this value to vertically move your logo.
}
}
Your code is all good. Just change min-width to max-width, and you're all set.
#media only screen and (max-width: 640px) {
#logo { height: 150%; };
}
Right now, what you are saying is:
#logo { height: 500%; } - Give the logo a height of 500%.
#media ..(min-width: 640px) {#logo {height: 150%;} } - If the screen size is at minimum 640px wide (or wider...), let the height be 150%.
I'm surprised nobody noticed this before.
I am creating a website with Wordpress.
I need to make a ImageMap plugin responsive. The only solution is to make it scrollable on Mobile devices. Because if image is made resposive with width:100%; and overflow-x:scroll; its also scrollable on Dekstop.
I tried also with: #media screen and (min-width:360px) and (max-width: 480px). Thought maybe there was problems in this code, so searched and tried every answer from stackoverflow.com, didn't helped. My Site
Made a ticket for that plugin, but I need fast answer, client is waiting.
How to achieve scrolling in mobile only, while dekstop responsive using CSS?
#media screen and (min-width:360px) and (max-width: 480px){
#image-map-pro-3521{
width: 100%;
height: 100%;
left: 0;
top: 0;
overflow-x:scroll;
overflow-y:hidden;
-webkit-overflow-scrolling:touch;
}
.container {
position:relative;
width:100%;
overflow-x:scroll;
}
}
#image-map-pro-3521{
width: 100%;
height: 100%;
left: 0px;
top: 0px;
overflow-x:hidden;
-webkit-overflow-scrolling:touch;
}
.imp-wrap{
min-width:100%; min-height:100%; width:auto; height:auto;
}
.container{
position:relative;
width:100%;
padding:0;
margin:0;
}
.container .row {
margin:0;
}
css works top down and something further down will over wright something higher in the page. So what you have is
#media screen and (min-width:360px) and (max-width: 480px){
#image-map-pro-3521{
overflow-x:scroll;
}
#image-map-pro-3521{
overflow-x:hidden;
}
so whatever happens overflow-x will always be hidden as it is not surrounded by an conditional statement and is further down the page. So to fix it either put the #media stuff at the bottom of the css or put a conditional statement around the general stuff. The better option is to rearrange the css unless you expect browsers who cant process #media tags.
side note: why are you concerned about the min width? dose anything different happen under 360px wide? if not then you dont need the min width statement, this should save a little bit of bandwidth and help the page load a tiny bit faster.
This seems to be a pretty standard situation but the HTML/CSS is behaving oddly. I'm in the process of building a profile page for a game and am also looking at mobile responsiveness. I can't seem to get the right-margin to go away. It's not a problem in portrait mode (using a Chrome mobile emulator extension) but in landscape, the div + margin is too wide and a scrollbar appears.
HTML:
<div class="userProfile" style="display:none">
<div class="profileTop">
<div class="profilePicture">
<img src="somepicture.png"></img>
</div>
<div class="profileName"></div>
</div>
</div>
CSS:
.profileTop {
position: relative;
top: 10%;
left: 15%;
width: 70%;
height: 12%;
margin: 0;
}
.profilePicture {
display: inline-block;
width: 12vw;
}
.profilePicture img {
width: 100%;
height: auto;
vertical-align: top;
}
.profileName {
display: inline-block;
position: relative;
font-family:Stencil;
font-size: 1.3em ;
font-weight: lighter;
color: white;
left: 20%;
top: 35%;
}
What's odd is that if I decrease the width of the "profileTop" class, the right margin grows so that the whole thing is the same width. Any help?
EDIT: I can get a workable solution by reducing the width of "userProfile" but it's still bothering me that this won't work as originally intended.
EDITx2: The margin also exists on the "userProfile" div. I suppose the "profileTop" div is following its parent somehow but even if I add margin-right: 0 attributes to both divs, the margin is still there. The parent of "userProfile" is the body.
Error in HTML code, you don't need a closing tag for image.
Secondly, you can use media queries to achieve that. Media queries even have an option for landscape and it's really easy to use. Good luck
#media (min-width: 700px) and (orientation: landscape) { ... }
P.S. Use codepen or jsFiddle second time, it will be WAY MORE simpler to help you.
EDIT: Added media queries example
You need to use a more specific selector to override the initially-assigned CSS attribute.
#media (max-width: 768px) {
div.userProfile div.profileTop {
margin-right:0;
}
}
Let's say I have
#media all and (min-width: 360px) {
#navigation {
background-color: #dddddd;
display: block;
position: fixed;
top: 0px;
}
}
#media all and (min-width: 760px) {
#navigation {
background-color: #111111;
display: none;
position: fixed;
bottom: 0px;
}
}
this kind of CSS code (assume that I have div id="navigation" tag in the body tag.).
But if I run this code and change the size of browser to see the difference, it won't change as the size changes. The CSS attributes in the first media query statement is applied to the style, except the display attribute.
How do I make the other attributes to behave as it supposed to be?
edit: Here's the codepen for my project:
http://codepen.io/thatkoreanguy/pen/mJwPBW
Ok so I am going to assume the main problem here is when you are going to 360px width your div is not sitting at the top of the view port its stuck at the bottom?
When you have a media query it still inherits previous styles if you want to negate any you would have to return them to there default value which for bottom would be auto I believe.