This question already has answers here:
Media Queries: How to target desktop, tablet, and mobile?
(21 answers)
Closed 5 years ago.
I work on a web page and I want when I narrowed the page (by the square button to the right of the page close to closing page cross), the reduced page is reduced by a width-max = 360px, ie its minimum length = 360px; how I have to program this is what you had an example of solving this problem is thank you very much.
Use media queries for responsive designing. In your case you should write your styles inside a media query for max-width of 360px. Like:
#media only screen and (max-width: 360px) {
.my-selector {
/* styles */
}
}
Learn more about Media Queries.
Hope this helps!
Related
This question already has answers here:
How to change CSS when the screen size changes
(4 answers)
Closed 9 months ago.
I'm trying to make my footer responsive when screen size changes. Javascript works but its only when the page has been loaded. I dont know if there's way i can use html and css only......
var reswidth = window.screen.width;
var mql = window.matchMedia("screen and (max-width: 765px)");
if(reswidth < 756){
console.log(document.getElementById('logon-footer').children[0].setAttribute('style','position: static'));
} else if(mql.matches){
alert("Window is 800px or wider");
}
``
you can do that using The #media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as:
width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
Using media queries is a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.
You can also use media queries to specify that certain styles are only for printed documents or for screen readers (media type: print, screen, or speech).
In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: yellow;
}
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<h1>The #media Rule</h1>
<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "light blue", otherwise it is "yellow".</p>
</body>
</html>
I want to make my styles responsive to the opening of the bookmarks bar in the browser.
I have a media query watching the height of the screen.
When I drag the screen manually (reducing its height) the media query works as expected.
However, when I open the bookmarks bar, the viewport shrinks (past the point where it should trigger the media query, as per Chrome DevTools) but nothing happens.
1.) Why might this be?
2.) Is there a best practice for dealing with the bookmarks bar changing the size of the viewport?
Update:
This is not a duplicate of this question.
That question asks if 100vh takes into account the bookmarks bar. I am asking why my media query does not respond to the bookmark bar changing the pixel height of the viewport.
Another update:
Link to example is here: https://n7m58rjj84.codesandbox.io/
Open in new tab, resize your window up and down and media queries work fine.
Try opening and closing bookmarks bar, and nothing happens.
Relevant code:
E.g. between small and medium breakpoints:
`#media (min-height: 720px) and (max-height: 760px) { ... }`
Using this simple code and switching the bookmark display on and off:
<html>
<head>
<style>
body {
background: #0f0;
}
#media (min-height: 720px) and (max-height: 760px) {
body {
background: #f00;
}
}
</style>
</head>
</html>
It works fine
tested in Chrome 72.0.3626.119
tested in Firefow 65.0.2 (with personal menu bar)
Make sure your tests includes the fact that you need to stay in this 40px range while modifying the viewport's height (760 - 720) otherwize the media query won't be tiggered
This question already has answers here:
Hide div element when screen size is smaller than a specific size
(9 answers)
Remove element for certain screen sizes
(4 answers)
Closed 5 years ago.
how can i remove all content of a div if the webpage is only X px width
i am searching for something like this
<div if(min-width:1000)
{content=''}>
<img>
<script>
....
</script>
</div>
Thank you for your answers
You can use media query to achieve this.
#media screen and (max-width: 1000px){
div{
display: none;
}
}
The above css snippet will hide the div if the width is less the 1000px.
This question already has answers here:
Using external images for CSS custom cursors
(5 answers)
Closed 6 years ago.
Second example work, the hand did show up, but why the first div doesn't work?
div {
cursor: url('http://i.imgur.com/EuDeZWn.png'), auto;
}
span {
cursor: url('http://www.javascriptkit.com/dhtmltutors/cursor-hand.gif'), auto;
}
<div>
target
</div>
<br>
<br>
<span>
target 2
</span>
From MDN:
In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.
You image is 237 x 173, which is significantly larger.
I'm currently building a portfolio site and i want the sidebar to be hidden by default on mobile devices since its quite big atm, you can check it out here: www.dosh.dk/rofl/
The sidebar will hide if body has the class "sidebar-inactive" and therefore i want to do a single check on the viewport when the site is loaded and then add the class if below X
Im using coffeescript and ive made the following code but it doesnt seem to work, any ideas?
$ ->
$(".inner_content").hide()
$("#myskills").show()
$("#site").addClass 'loaded'
if $(window).width < 600
$("body").addClass 'sidebar-inactive'
How about a non-JavaScript solution using CSS media queries?
#media (max-width: 599px) {
.sidebar {
display: none;
}
}
This will hide elements with the sidebar class when the screen is less than 600px wide and will update as the browser is resized.
More: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries