I'm building a site for giggles http://briannabaldwinphotography.com/. My mobile menu button won't go away with display:none in safari on my iphone landscape mode, although it works in Chrome on my phone. I want the #menu-button to show when the device is under 500px and to disappear when it is above 500px. The menu button is added in through jquery with the id of #menu-button. If you use dev tool and look in the sources for css_tablet.css you'll see I have #menu-button set to display:none. Any advice much appreciated.
$("#menu").addClass("js").before('<div id="menu-button"><img src="third_logo.png" alt="menu"></div>');
$("#menu-button").click(function(){
$("#menu").toggle();
});
$("li").click(function(){
$("ul").hide();
});
Add this CSS -
#media screen and (min-width: 500px) {
#menu-button {
display: none;
}
#menu.js{
display: block !important; // You must have to use '!important' as javascript adding inline style on the menu (display block/none)
}
}
Above CSS will solve the Button hiding issue and also the issue we talked on the last comments.
For better understanding of Media Queries for different devices. Look at this article - https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
In your "css_tablet.css" all the css is defined within a media query which is applied only to screens with a min-width of 500px.
#media screen and (min-width: 500px) {
#menu-button {
display: none;
}
... more css ...
}
In portrait view, an iPhone 5 is 320px wide, iPhone 6 is 375px and iPhone 6+ is 414px. So all of these phones dont apply the css from your "css_tablet.css" stylesheet.
So it isn't phone/tablet specific.
Related
I'm quite new to both Web Development and Stack Overflow so I hope this question is not against any rules.
I'm creating a personal website while I learn Web Development and I'm having an issue with responsiveness. The website performs perfectly at all window sizes when I'm testing it on Google Dev tools. No matter how I resize my window using the Device Toolbar on Dev Tools everything that should be responsive works really nicely.
However, when I view the website on my iPhone 12 (haven't tested on other models) using either Safari or Chrome and only on landscape it starts behaving weirdly. The nav bar is supposed to always have a width of 100% of the browser width, both when expanded, i.e. at larger screen sizes and when the burger is not shown, and when collapsed, i.e. at smaller screens and when the burger is shown. However, on mobile when the page is loaded for the first time everything is fine but when you change to landscape and back to portrait the nav bar gets reduced, i.e. not occupying the full width of the browser.
I can't figure out why...
The website can be accessed here: www.imtiago.world
The source code is here: https://github.com/brandaspt/brandaspt.github.io
Thanks in advance for any help!
EDIT:
I guess the issue is with my nav bar because the same is happening with this live demo of just the nav bar: https://jsfiddle.net/2owsr9pz/
This my only media query:
#media only screen and (max-width: 600px) {
.top-nav-links {
display: none;
}
.top-nav-burger {
display: block;
}
.close-button {
display: none;
}
}
I'd use orientation in your css as well, from looking at your code, you only use screen size. Here's a demo of what a simple usage with screen size looks like.
#media only screen and (min-device-width : 768px) and (orientation: landscape) {
body {
flex-direction: row;
}
}
#media only screen and (min-device-width : 768px) and (orientation: portrait) {
body {
flex-direction: column;
}
}
I made a site with a responsive design for smartphones etc.
The menu goes away and a button appears to open the menu when you are using a smartphone.
To activate the button i implemented this javascript:
$(document).ready(function() {
$('.menubutton').click(function() {
$('.nav').slideToggle('slow');
});
});
But when i go on the website with my smartphone the menu is standard openend. But i want that if i go on the site the menu is closed. How can i do this?
PS:
Sorry i never really worked with javascript before :)
Do with css media query
#media only screen and (max-width: 500px) { //fix size as you wish
.nav{
display:none;
}
}
You have to use media query (in your CSS file) and specify at what point should it go to a hamburger menu.
The following media query will trigger the menu to hide as soon as the screen size is 767px:
.navbar-toggle {
display: block;
}
#media (min-width: 768px) {
.navbar-toggle {
display: none;
}
}
Here is the website in question:
site removed
As you can see at the top right of the homepage there is a banner that overlays the graphics on the site. It shows the Rolex brand so customers can see the affiliation. Unfortunately, when you view it on a mobile device the overlay banner doesn't show up at all and I have no idea why.
Any and all help is appreciated, thank you!
It is defined in your bootstrap.css
#media (max-width: 480px) {
#overlay {
display: none;
}
}
The problem is not the mobile device but the screen width.
This is the one:
#media (max-width: 480px) {
#overlay {
display: none;
}
}
I want to make my button controls resizable according to the screen sizes, like they should adjust themselves on other mobile devices as well(iPhones and iPads) .How is it possible?
Css3 has mediaqueries which allows you make screen specific styles. This is not very well supported in older IE's, that is why you always have to define an normal.
The cascading effect stays in affect, you do not need to redefine properties from normal in the mediaqueries (for example, background will be green in all scenarios)
/*normal*/
button{
width: 200px;
background: green;
}
#media only screen and (max-width: 600px) {
button{
width: 150px;
}
}
#media only screen and (max-width: 480px) {
button{
width: 100px;
}
}
This is called responsive design, the design responds to the widths. IE will do nothing, but if you are using Firefox and make the width of the browser smaller, it will hop automatically to the media styles
Well you gotta use media queries for that :
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
Use percentage based sizes on your elements so that they scale automatically, or use media queries for specific window sizes, and set your element sizes accordingly.
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
You can make them resizable by setting their width in percentage, so that they would resize according to the screen size,
.buttonclass
{
width:80%;
}
This should work..
if you want to use pixels, then make use of media queries according to various screens you need to support,
#media screen and (max-width: 480px) and (min-width: 320px) {
.buttonclass{
width:300px;
}
}
I'm using the Bootstrap affix side-navigation as used in the Bootstrap documentation. As you can see there, the scrollspy doesn't make any sense when the viewport is smaller than 768px and the page is switching to mobile view. Hence, I want to deactivate the scrollspy as soon as the page switches to mobile viewe. Keep in mind that the fix should only apply on the sidebar-navigation – not on navbars. Ideas, anyone?
The fix is easy enough. Use media queries and define position:static; for your sidebar-nav div for mobile views, eg
#media (max-width: 767px){
.sidenav.affix { /* change sidenav selector to match your layout */
position: static; /* removes the affix behaviour */
width: auto; /* customise as required */
top: 0; /* customise as required */
}
}