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');
}
Related
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.
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>
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.
I need a media query (or similar) using pure CSS, HTML or possibly LESS (as long althogh pre-compiled won't work) to apply a particular class to an ID depending on the screen height. I'm setting classes defined by Add2Any - not css properties.
jsfiddle
What I want to do is set the div #add2any to this for small screens.
<div id="add2any" class="a2a_kit a2a_default_style">
Otherwise I want this:
<div id="add2any" class="a2a_kit a2a_kit_size_32 a2a_default_style">
Is this possible, and how?
Looking for a non-javascript/not Jquery solution to avoid time lag and having a <div> for each style and showing only the relevant one.
Background
The idea is to change the layout and size of the AddToAny bar for small screens, so instead of 32px images it displays a totally different style of compact bar, with less buttons, and using AddToAny's classes means future changes they make would not be dependent on fixed css in my stylesheets. Browser compatibility is important.
CSS so far
#media screen and (max-height: 430px) {
.a2a_button_google_plus, .a2a_button_pinterest, .a2a_button_print { display:none;}
#add2any a, hr#add2any, hr#add2any a, .a2a_divider { font-size: 15px; padding-top:2px; padding-bottom:-2px; }
.a2a_divider { top:5px ; position: relative}
}
Edit
Unable to find solution from any of these, I'm using foundation framework.
conditional CSS based upon div not screen
Toggle mobile view in Foundation using CSS class or JS
How to toggle class using pure javascript in html
**Edit 2 **
Suggestions of using Less or Sass from this question seem like overkill, since the solution would be needed on every page.
Self-hosting the script and adding some javacript to it might be a better choice, the class names look certain to remain the same even if the script changes since all Customize instructions encourage direct use of AddToAny's class names.
Edited
If you have this html:
<div class="a2a_kit a2a_default_style">
<div class="a2a_kit a2a_kit_size_32 a2a_default_style">
You can make a media query like this:
/* first state */
.a2a_kit { display: block; }
.a2a_kit.a2a_kit_size_32 { display: none; }
#media screen and (max-height: 430px) {
/* reverse behaviour on max-height 430 px */
.a2a_kit { display: none; }
.a2a_kit.a2a_kit_size_32 { display: block; }
}
You just need to set up modified styles in your media queries:
#add2any {
/* any styles you want to apply all the time */
background-color: blue;
width: 100px;
color: white;
}
#media (min-width: 420px) and (max-width: 760px) {
/* styles when screen is greater than 420px wide but less than 760px */
/* omitting the 'and (max-width: 760px)' would cause these styles to apply at any width above 420px unless overridden by another media query */
#div1 {
background-color: red;
width: 300px;
color: yellow;
}
}
#media (min-width: 760px) {
/* styles when screen is greater than 760px wide */
#div1 {
background-color: green;
width: 600px;
}
}
JSFiddle Demo
*if you don't want to style based on the ID, you can add a unique class and style that
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).