I need to put different images for small device and for large device. I tried to solve it with media query but without any success.
Here is the code:
<div class="small-12 large-4 columns" id="stickSlider"> <br>
</div>
in css file:
#leftSliderImage { background-image: url('img/leftSlider.gif'); width: 324px; height:395}
#media screen and (max-width: 767px)
{
#leftSliderImage { background-image: url('img/smartLeftSlider.png'); width: 543px; height:224px;}
}
p.s: I have another same problem in button : I need to put different button image to each device , How can i do this?
Can you help?
Thanks
Make sure you have a <meta name="viewport" content="width=device-width,initial-scale=1.0">
in the <head> of your HTML. Here's a working demo
Related
I'm trying to make it so that when users view my site on a mobile device (a max-width of 414px), a specific div (mobile-articles) is visible. However when viewed on desktop, the view should be hidden. I've tried the below, however my div doesn't seem to be visible on a mobile device (though it is hidden on desktop). How can I fix this? See code below:
Test.html
<style>
.mobile-articles {
visibility:hidden;
display: none;
}
#media (max-width: 414px) and (min-width: 367px) {
#viewport {
width: device-width;
}
}
#media screen and (max-width : 414px) {
.mobile-articles {
visibility:visible;
display: block;
}
}
</style>
<body>
<div class="mobile-articles"></div>
</body>
In order to use media queries in your css you need to include a meta tag inside <head> to set the device-width to the width.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
CSS Solution:
.mobile-articles {
display:none;
}
#media screen and (max-width:780px) {
.mobile-articles {
display:block;
}
}
JS Solution:
<script>
if (window.navigator.userAgent.match(/Android/i)||
window.navigator.userAgent.match(/iPhone/i)) {
document.getElementsByClassName('mobile-articles')[0].style.display = 'block';
}
else {
document.getElementsByClassName('mobile-articles')[0].style.display = 'none';
}
</script>
If still dont working I recomend you to delete the this code in CSS stylesheet
#media (max-width: 414px) and (min-width: 367px) {
#viewport {
width: device-width;
}
}
Anyway , if you want to simplify code , you could use Bootstrap, materialize , or any other framework as big as those
You should simply use bootstrap and its visibility classes which is for exactly you are trying to do.
https://www.tutorialspoint.com/bootstrap/bootstrap_responsive_utilities.htm
For your code; i think you can try specifying window size for large screens too. I mean first style for mobile articles class should be in a media query too.
if you use bootstrap you can do:
<div class="d-sm-block d-lg-none" >
I've created a HTML page and I'd like to make it responsive.
I've looked at the w3schools but didn't figure out how to make it responsive.
I've just add the line
<meta name=viewport content="width=device-width, initial-scale=1">
but it doesn't make the text responsive. I know I have to add something, but can't figure out what.
Here's my code:
<!doctype html>
<title>Test page</title>
<head>
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
h1 { font-size: 50px; }
body { font: 20px Helvetica, sans-serif; color: #333; background: #eaeaea;text-align: center; padding: 150px;}
article { display: block; text-align: left; width: 650px; margin: 0 auto; }
a { color: #dc8100; text-decoration: none; }
a:hover { color: #333; text-decoration: none; }
</style>
</head>
<article>
<h1>This is a test page</h1>
<div>
<p>
Test page that I made for fun. I would like to be able to code. Send me an email (not working)</p>
<p>— Alessio</p>
</div>
</article>
EDIT:
At the moment I'm playing with the line
<meta name=viewport content="width=device-width, initial-scale=1">
Without this line, the entire text fit on a mobile device, but very small. So the page is zoomed out to fit the screen.
With the line, the text is a good size, but it doesn't fit the screen.
I need something so that I can keep the text size, but make it fit depending on the screen dimension.
I don't want to use library. I'd like to write the code directly in the page (if possible).
EDIT 2:
following the suggestion of #elhampour and #gavgrif I've investigated more the bootstrap. I'm doing a course at freecodecamp.com and now I'm understanding more about this suggestion.
At the moment the code is
<!doctype html>
<title>Coming Soon</title>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"/>
</head>
<div class="container-fluid">
<h1 class="text-primary text-center">We’ll be online soon!</h1>
<img class="img-responsive col-sm-6 col-md-4 col-lg-3" src="https://livetogether.xyz/images/LT-header-alpha-flip.ico" alt="livetogether.xyz">
<p>If you need to you can always contact us, we’ll get back to you shortly!</p>
<p>— LiveTogether Team</p>
</div>
Now I'm looking to make the text responsive
What exactly do you want to add? Comment on my question if the following does not answer your question.
First of all, html pages are already responsive. Your divs will change their size as the page's size changes. Text size cannot be made to fit the screen by default, however you CAN use a library like this: https://plugins.jquery.com/textfill/If you want to, you could have an event in your javascript which will fire when the document's size is changed, or when it is loaded, and it will customize your page for you, based on your input. This would be done by selecting elements individually and setting their .styles.Also, css code can be changed as the page is changed. Look into http://www.w3schools.com/css/css3_mediaqueries.aspGood luck with your project, and have a good day!
You will need to use media queries in your CSS to change the sizings etc in different viewports. The following will set the h1 to a 50px size on screens above 768px and to 30px for screens at or below 768px:
#media (max-width: 768px) {
h1 { font-size: 30px; }
}
#media (min-width: 769px) {
h1 { font-size: 50px; }
}
As mentioned by #elhampour - investigate Bootstrap and then you can change the layout as well as the sizes etc:
<div class="col-sm-6 col-md-4 col-lg-3">
<p>test content 1</p>
</div>
This will display as the full viewport of a mobile (col-xs-), half the width of a small viewport (tablet), a third of a medium viewport (laptop) and a quarter of the larger viewport (descktop screen).
i am just learning how to use bootstrap and media queries for the first time. I am trying to make some text get smaller when the screen gets smaller , however for some reason i am not sure why bootstrap does not do this, does this mean i need to use media queries ? or is there a function in bootstrap ?
HTMl:
<div class = "Logo">
<a class="navbar-brand" href="#">
<h1>Hello</h1>
<h2>There</h2>
<h3>You</h3><br/>
<p>Time To make a change</p>
</a>
</div>
CSS:
#media (max-width: 480px) {
.Logo {
Float : left;
height : 20px;
width: 70px;
}
}
I want it so that when someone was to launch it in an iphone etc the text which is in the navbar will just shrink and become smaller, but for some reason it is not doing it.
Thanks again for all the help , sorry if this is a basic question but just trying to understand bootstrap etc :)
I think you can just use:
#media (max-width: 480px) {
.Logo {
Float : left;
height : 20px;
width: 70px;
}
Logo.h1 { font-size: 80%; }
Logo.h2 { font-size: 80%; }
Logo.h3 { font-size: 80%; }
}
This will make it 80% of the original size.
Source: W3schools
you can solve your issue by simply adding 'viewport' meta tag in your html.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
This meta tag scales your whole content according to the dimensions of the device the web page is currently being viewed on. You can find more about this tag here.
I want to hide my menu icon on smartphone screens but the media query isn't working. Can anyone shed some insight?
I tried looking at some other answers on here but nothing really helped as I am checking it by re-sizing my browser but I'm using max-width so it should still show.
I have three different logos. One for desktop, one for tablet, and one for mobile. Right now I'm trying to hide my desktop logo for mobile and it's not working so I thought I would try to find out why before trying to hide/reveal any more images.
UPDATE: SOLVED. I'm not sure why it works but after constant refreshing and 30 minutes later it works.
/* Smartphones (portrait) ----------- */
#media only screen
and (max-width : 320px) {
#menu-logo {
display: none;
}
}
<div id="header" class="header">
<img id="menu-logo" src="../images/logo.svg"/>
<img id="menu-logo-semi" src="../logo-semi.svg"/>
<img id="menu-logo-small" src="../logo-short.svg"/>
</div
There's no need to have 3 links.
A better way to do this is as follows:
<div id="header" class="header">
<a class="logo" href="/index.html">My cool name</a>
</div>
<style>
<!-- Desktop -->
.logo {
display: block;
text-indent: -9999px;
width: 200px;
height: 82px;
background: url(logo.svg);
background-size: 100px 82px;
}
<!-- Tablet -->
#media all and (max-width: 64em) and (min-width: 48em) {
.logo {
width: 80px;
height: 60px;
background-size: 80px 60px;
}
}
<!-- Mobile -->
#media all and (max-width: 48em) {
.logo {
width: 50px;
height: 30px;
background-size: 50px 30px;
}
}
</style>
Cleaner code.. Just change your logo sizes as you need.
EDIT
I don't know if your logo changes visually on each screen resolution interval. If so, just state another "background: url ..." rule on each media query, before the "background-size". If not, it will be ok since it's a vector, as long as the proportions are correct.
The cause is most likely due to CSS specficity, and the order of things in your stylesheet(s). We need to see all of the CSS affecting the #menu-logo item, and the img generally, especially the default (ie non-media query) CSS, and any other media queries that affect this menu-logo item.
And we also need to know whether such CSS comes before or after the media query - the order of things is very important. (NB: I know really this would be better as a comment rather than a full answer, but I don't have enough rep for that yet!)
So look at the specificity, and the order, then if still flummoxed give us more of the CSS (or the whole stylesheet if it isn't too long).
So I'm using two media queries on my page:
<link rel="stylesheet" media="screen and (max-device-width: 1099px)" href="./src/css/narrow.css" />
<link rel="stylesheet" media="screen and (min-width: 1100px)" href="./src/css/main.css" />
The main.css one loads by default, but when the browser is re-sized below 1100px, it simply loads no stylesheet, therefor the entire page renders no styling.
Anybody have any clue what I'm doing wrong? Also, isn't it possible to use media queries inside of "main.css"? So I can only alter certain elemnts based on browser width, instead of loading a whole new stylesheet? Thanks much guys :)
Yep you can do this all in the main stylesheet, so something like this:
#media only screen and (max-width: 1099px){
/* css here */
}
#media only screen and (min-width: 1100px){
/* css here */
}
Actually I also noticed you had max-device-width: on so this will only target ipads/iphones etc which is probably why you weren't seeing this stylesheet on the desktop
The alternative is to use Javascript/Jquery to detect the screen size and load a different stylesheet based on that screen size, but Adam's solution is probably better unless you need to separate your style sheets for a particular reason.
This article will give you all the information you need using jquery - http://css-tricks.com/resolution-specific-stylesheets/
You can also use multiple queries - I make a new one every time I fine a width that doesn't look quite right.
#media (max-width:319px) {
// styles
}
#media (min-width:320px) and (max-width:479px) {
// styles
}
#media (min-width:480px) and (max-width:479px) {
//styles
}
etc..., etc...
I'll also usually built the queries on each element that needs them. I find that when you put ALL your rules for the a media query in one section of your stylesheet things get confusing to maintain.
For example:
div.box {
width: 100%;
}
#media (...) {
width: 80%;
}
#media (...) {
width: 60%;
}
etc...
Then on another element that needs resizing I'll do the same thing:
div.otherbox {
width: 100%;
}
#media (...) {
width: 80%;
}
#media (...) {
width: 60%;
}
etc...