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
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>
Summary: I am attempting to design a restaurant menu. When viewing the site on a desktop the user should see the entire menu i.e a category ('Appetizers') and all of the food entries in said category('Fried Calamari', 'Mozzarella Sticks', etc). However, when viewed on a mobile device I would like the entries to be hidden and the food categories to be buttons. When the 'Appetizer' button is clicked, the user should then see 'Fried Calamari', 'Mozzarella Sticks', etc. I feel like I am going about implementing this in a convoluted way. My code:
index.html:
<div class="food-section-heading" id="appetizers">Appetizers</div>
<div class="menu-item">
Fried Calamari
</div>
<div class="menu-item">
Mozzarella Sticks
</div>
using javascript to hide what's normally there and present the button:
/* Function definitions */
function hideElements(className){
elements = document.getElementsByClassName(className);
for(i = 0; i < elements.length; i++){
elements[i].style.display = 'none';
}}
function showElements(className, displayType){
elements = document.getElementsByClassName(className);
for(i = 0; i < elements.length; i++){
elements[i].style.display = displayType;
}}
/* Main Program */
//if iPhone X or smaller hide '.menu-item' elements
if(window.screen.availWidth <= 375){
hideElements('food-section-heading')
hideElements('menu-item');
}
/* Code to create button and show elements upon click event not included. I stopped writing it and came here because I feel I can't be doing this right*/
Is there any easier way to go about this? (A good example of what I am talking about is grubhub.com on mobile vs what grubhub.com presents on Desktop.)
There are many ways to go about displaying the same document differently on different devices.
When targeting desktop / laptop / tablet / mobile a usual starting point would be to choose whether you want to detect:
the browser viewport size / viewport orientation / device screen size; or
browser make and version; or
data related to the browser's touch capability
Then, you can use:
CSS #media queries (commonly used in Responsive Design)
Client side browser sniffing (via javascript)
Server-side browser sniffing (used in RESS / Responsive with Server Side)
Touch detection (again, via javascript)
and more.
Targeting via CSS #media queries for screen size
One of the more easily-implemented approaches is to deploy one or several CSS #media queries.
Here is a simple #media query targeting screen sizes which are 800px wide or narrower:
#media only screen and (max-width: 800px) {
.menu-item {
display: none;
}
}
Adding in #media query hover: hover | none
If you want more sophisticated targeting (e.g. in a situation where you don't want to target narrow browser windows on a desktop / laptop) you can target the screen size (as above) in combination with checking if the screen supports a hovering action (on the basis that if it doesn't it's very likely a touchscreen):
#media only screen and (max-width: 800px) and (hover: none) {
.menu-item {
display: none;
}
}
Older approach using device-size #media queries (not recommended)
Before the #media query hover: hover | none arrived, if you wanted more sophisticated targeting, you could target actual device sizes with a #media query:
#media only screen and (min-device-width: 320px) and (max-device-width: 480px),
only screen and (min-device-width: 320px) and (max-device-width: 568px),
only screen and (min-device-width: 360px) and (max-device-width: 598px) {
.menu-item {
display: none;
}
}
But in practice this tends to be less useful and harder to maintain.
I think you might find some useful information in this thread.
Writing for mobile is very different from writing for desktop. It would likely be best if you used a router to direct users to one page if they are on mobile, and the one you've already created if they are on desktop.
I am implementing two header menu in one .jspf file. One header menu for mobile screen and another one is desktop screen. But problem is that when load the page then all links load for small screen header menu and desktop screen header menu. When page is load in mobile screen then i don't want to load desktop header menu screen links.
Right now i am using media query for hide the header for small screen and desktop screen.
I have another idea for hide and display to the header i.e javascript.
$(document).ready(function () {
var windowViewWidth = $(window).width();
if (windowViewWidth <= 767)
{
.........
.........
}
});
One mobile screen header menu screen shot:
When i am see view page source code then load all links. I tried Java script width property and media queries. Still it is not working. When i see page source code for small screen then should not show desktop header menu screen links in source code.
Any one have some different idea please with with me.
Could you have the same css for your header (mobile and desktop) in a media query and the CSS used for the header changes depending on screen size? So the header css would be using the same attributes and html for both, but just changing at the time of the media query criteria being true?
header{
height: 40px;
width: 500px;
background: gold;
}
#media screen and (max-width: 480px) {
header {
height: 300px;
width: 100px;
background: lightgreen;
}
}
<header>
<header>
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
I used a theme with a slider called flexslider to make the "Who's Using NameCoach"
https://www.name-coach.com/ (box tiles section with a list of users)
The theme seems to inherently have some sort of responsiveness feature in it.
However if I adjust the window width to lets say that of a mobile screen users size these tiles get so small that the users cant even see it.
Was wondering if anyone knows of any overiding css effect such as setting
when window => max width: 450px;
The tiles grow bigger and show lets say 4 entries rather than all 12 in a very small size.
Thanks!
Try something like this maybe?
#media (max-width : 450px) {
.flexslider .slides>li { width: 120px !important; }
}