I have a div with some text in it and a link around it.
<a href="mypage.html">
<div>
Text goes here ...
</div>
</a>
However, I only want the link to work at a certain page width, namely less than or equal to 625px. I know that the code below is nonsense, but it illustrates the sort of thing I am looking for:
a {
follow-link: no;
}
#media (max-width: 625px){
a {
follow-link: yes;
}
}
A solution with javascript would also be fine for me.
Thanks for your help!
You could use property called pointer-events
a {
pointer-events: none;
}
#media (max-width: 625px){
a {
pointer-events: all;
}
}
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.
I have a mockup the designer gave me, and I have to mimic it using HTML and CSS. There's an title that must look like this in desktop:
Grow your
business
faster
, and in mobile, it must look like:
Grow your business
faster
I haven't been able to figure out the way to do this.
Can you give me a clue?
Thanks.
I have tried with word-break, but haven't been successful yet.
You can use a <br> tag in a <span> for which you set up a CSS rule and a media query showing/hiding it:
.a {
display: none;
}
#media screen and (min-width: 480px) {
.a {
display: inline;
}
}
<h1>Grow your <span class="a"><br></span>business<br>faster</h1>
Try This
<style>
#media screen and (max-width: 467px){
.newline{
display:block;
}
}
</style>
<p>Grow your <span class="newline">business</span></p>
The word-break property specifies how words should break when reaching the end of a line.
You could use a combination of HTML and CSS
#media screen and (max-width: 768px) {
#title span {
display: block;
}
}
<div id="title">
Grow your <span>business</span>
</div>
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 have added a lightbox to a webpage, but the content does't show up in mobile view. I am a developer and new to designing, so please help me solve the issue
http://www.kahui.org/user/boardmember
Will be very thankful for any helpful suggestion
The problem is in the styles.css:2362
#media (max-width: 768px) {
...
.about-left p:nth-child(3) {
display: none;
}
...
}
It says browser to hide <p> if it's the third child.
I am looking for how to remove specific images with media queries. I am using HTML/CSS for a webpage.
Here is the code I currently have, which does not work (it was experimental):
#media (min-width:0px) and (max-width:1200px) {
LEVEL 1.png, level 6.png, http://placehold.it/160x600, http://placehold.it/100x100 {
display:none;
}
}
Any suggestions would be great, thanks.
Just give the images a class and then in the media query:
.that-class-name {
display: none;
}
Also, you should probably remove min-width: 0. I'm wondering if something less than 1200px would be better for for max-width as well. That's very wide.
Here you have to add a class inside the your media query
#media (min-width:0px) and (max-width:1200px)
.img { display: none; margin: 0 auto;} // your image class or can be img tag
}
and just now i answered the same question Here