For example: suppose I designed a website only for mobile version and if I try to switch in desktop. how can I give a kind of alert saying that- "To be viewed only in mobile" or something????
You can use CSS media queries for that:
#media only screen and (max-width: 768px) {
/*something*/
}
Every device with a width of 0px to 768px will will get the styles in that rule set.
Alternatively, you can use JS if you want to show a JS alert. (alert('hey'))
Here is and MDN doc of the topic: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
You can do something like this:
<div class="content">
<!-- your content -->
</div>
<div class="fallback-content">
<!-- your fallback content -->
</div>
<style>
.content{
//your style
}
.fallback-content{
display: none;
}
#media(min-width:600px){
.content{
display: none;
}
.fallback-content{
display: block;
}
}
</style>
Related
I have:
jumplinks
two different designs for desktop and mobile
some CSS media query in order to display only one of the designs while the other one is on display: none.
Basically is something like that:
go to my_ID
<div id="my_ID" class="desktop"> my desktop content</div>
<div id="my_ID" class="mobile"> my mobile content</div>
It works fine for the design, but the jumping only works partly: The browser always wants to jump to the first ID, if the first ID is not displayed the browser does nothing. (I thought it will jump to the second one that is displayed.)
Is there any solution for that problem like adding the IDs dynamically with jQuery or some other workaround?
Thanks in advance
ID's can only be used once per html page.
The anchor should be different for desktop and mobile if one is hidden depending on the user's display.
/* Medium screens and larger - example */
#media only screen and (min-width: 40.063em) {
a[href="#my_mobile_ID"],
#my_mobile_ID {
display: none;
}
}
/* small screens - example */
#media only screen and (max-width: 40em) {
a[href="#my_desktop_ID"],
#my_desktop_ID {
display: none;
}
}
#my_desktop_ID {
background: lime;
width: 300px;
height: 400px;
}
#my_mobile_ID {
background: cyan;
width: 300px;
height: 400px;
}
go to my_desktop_ID
go to my_mobile_ID
<div id="my_desktop_ID" class="desktop"> my desktop content</div>
<div id="my_mobile_ID" class="mobile"> my mobile content</div>
I changed the href of the links on mobile with some jquery, now I can use two different IDs. It goes like that:
if ($(window).width() < 767){
$("a[href='my_URL']").attr('href', 'my_URL_mobile');
}
So I am making a website using the mobile first method. now my question is: how can i change the text/images etc (not the font-size)?
so when you open the site on a phone it show a text for example: hello there and when your on a laptop/pc it show a different text like: have a nice day the same goes for images/buttons
I know the #media screen and (min-width) but how do I add this to the html without showing the text when not needed?
I have given two solutions.
#1 Solution: display: none / display: block
This is a fairly simple and common way to display content, depending on the screen size. And as I said above in the comments, you can operate on the display: none / display: block rule by setting two texts in the container.
Also, by turning off the visibility of the text for a mobile device, using the pseudo-class :nth-child():
.container p:nth-child(2) {
display: none;
}
And from to, the media query will turn the rules for each text:
#media (max-width: 767px) {...}
.container p {
font-size: 32px;
color: green;
}
.container p:nth-child(2) {
display: none;
}
#media (max-width: 767px) {
.container p:nth-child(1) {
display: none;
}
.container p:nth-child(2) {
display: block;
}
}
<div class="container">
<p>This is notebook</p>
<p>This is mobile</p>
</div>
#2 Solution: pseudo-class :after
This solution is less code, due to the absence of the need to specify the text in the tags. In this case, the text is passed as the content: '' parameter.
.container p {
font-size: 32px;
color: green;
}
.container p:after {
content: 'This is notebook';
}
#media (max-width: 767px) {
.container p:after {
content: 'This is mobile';
}
}
<div class="container">
<p></p>
</div>
Simply use JavaScript. For example, if you have this for mobile users:
<div class="mobile"><p>Hey, I'm on mobile!</p></div>
And this for PC users:
<div class="computer"><p>Hey, I'm on PC!</p></div>
Then you can do it like this:
<script>
const mobile = document.querySelector(".mobile"),
pc = document.querySelector(".computer"),
media = window.matchMedia("(max-width: 1000px)")
if (media.matches) {
mobile.style.display = "none"
pc.style.display = "block"
} else {
pc.style.display = "none"
mobile.style.display = "block"
}
</script>
You can use #media only screen and (hover: none). It's a media query that detects devices with hover ability. So you can write your original code for mobile first and then add your media query for devices that don't have hover abilities like desktops. It doesn't require to specify a screen width or anything like that since you can't predict every screen size out there. It automatically detects devices with hover or not for every screen size
Exmp:
#media only screen and (hover: none){
.mystyle{
// your style here
color: red
}
}
I think it's a good way without having the need to duplicate your code.
I'm having some trouble using a media query. It's quite a basic thing but for some reason is not working.
Basically, I have a border around a div tag:
<div class="container games mobile">
<div class="row">
<div class="col-lg-8 div border">
<!-- This div tags are closed at the end of the file -->
I'm using bootstrap and don't honestly know if that can be part of the problem but what I wanted to do was to remove that border whenever the user was in a mobile, and to do so, I added the following lines in my css file:
#media screen and (max-width: 600px) {
.border {
border: none;
}
}
Border on computer
Border on mobile even though I used the querie
(added a grey square on both prints because the content doesn't really need to be in here but a live preview can be found here)
Could the issue be parent>child related?
Thanks in advance!
It's not working because it's being overwritten by bootstrap code. Try this:
#media (max-width: 600px) {
.border {
border: none !important;
}
}
Use css specificity here instead using !important. why not !important?
#media screen and (max-width: 600px){
.games.mobile .border {
border: none;
}
}
I have this html tag to put an arbitrary image on a page.
<img src="https://example.com/wp-content/uploads/....186.png" width="133" height="13" style="float:right; margin-right: 100px; margin-top: 40px;" />
However, I dont want this image on mobile. Can this be done?
It is better to be mobile first.
select class for your image. for example hide-mobile. then write these codes:
.hide-mobile
{
display: none;
}
#media only screen and (min-width: 500px) {
.hide-mobile
{
display: block;
}
}
You should take a look at media queries:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp
To hide the image, you would need a media query with display:none, which is only included on a low resolution.
#media only screen and (max-width: 500px) {
img {
display: none;
}
}
EDIT: It is not a good idea to define your style inline. You should rather use a seperate css file or at least a <style> block in your header. This helps with controlling different scenarios and keep your styling consistent over multiple objects and pages.
So, I basically want to have 2 different layouts for a page on my website.
For under 400px:
[image]
description
[image]
description
For above 400px:
[image] description
[image] description
(so, the image and the text are on the same line)
I know I can do this very easily with Bootstrap if my breakpoint was one of the predefined ones, but it is not. So, what would the best approach be? Could I still use Bootstrap grid system and 'hack' it somehow or do something else altogether?
Thanks!
Here is a snippet
/*screen width over 400px*/
#media (min-width: 401px){
img {
width:50px;
height:50px;
}
p{
display:inline;
}
}
/*screen upto 400px*/
#media (max-width: 400px){
img {
width:100px;
height:100px;
}
}
<img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSSHCRPXAtpOWvSaR4T5ecblzIT-RdIV19VjNB4uUPPnEq_UT5r'>
<p id='p1'>
description
</p>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEaoUONNbTby87bfUNcRrdufGcaLSbDnC3SGSqKLk1ZwNFMEE3'>
<p id='p2'>
description
</p>
Alright your going to have to use media queries. Here are a few examples that I wrote.
A media query is a set of styles(styles that you set)that has a certain screen size condition.
When this screen size condition is met the styles given inside the media query override any other styles that contradict the styles outside the media query.
Here is an example
#media (max-width: 500px) {
#visible {
display: none;
}
}
<p id="visible">Not Hidden</p>
<p>Change screen sizes!</p>
Here is the basic syntax of media queries
First make the #media then add a screen size condition (max-width: 1000px) or (min-width: 500px) heres an example using max-width. Then, add the styles inside the media query.(Dont forget to close the media query!)
#media (max-width: 1000px) {
h1 {
display: none;
}
#hidden {
display: block;
}
}
p {
display: none;
}
<h1 id="heading">Heading</h1>
<p id="hidden">Hidden</p>
Now run the code snippet above and you will see that the heading will appear when the screen size is above 1000px and it disappears and a hidden phrase appears when the screen size is below 1000px.
Here is a tutorial on media queries Media Queries
What you're looking for are css media queries. Check this page for an in-depth explanation http://www.w3schools.com/cssref/css3_pr_mediaquery.asp.
Alternatively, in your case it looks like you simply want to wrap the descriptions on to the next line when the viewport becomes too narrow. If this is the case then there's no need to add in extra markup because you can just leverage the natural behavior of inline-block elements. This link will clarify the behavior of inline-block elements for you http://www.w3schools.com/css/css_inline-block.asp.
I would go this way, using a row structure.
It will give you some more options down the road, when/if you maybe want 3 img/text lined up, or ... and so on, sooner or later maybe a header, maybe a footer.
.header {
padding: 10px;
border-bottom: 1px solid #999;
}
.container {
padding: 10px;
white-space: nowrap;
}
.container .row {
margin-bottom: 10px;
}
.container .row span {
margin-left: 10px;
}
.container .row.at-top span {
vertical-align: top;
}
#media (max-width: 400px){
.container .row span {
display: block;
margin-left: 0;
margin-top: 10px;
}
}
<div class="header">
<div class="row">
Header
</div>
</div>
<div class="container">
<div class="row at-top">
<img src="http://lorempixel.com/200/100/sports" />
<span> Some text ... being aligned at top</span>
</div>
<div class="row">
<img src="http://lorempixel.com/200/100/city" />
<span> Some text ... or at bottom</span>
</div>
</div>