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;
}
}
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;
}
}
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.
I have a one page html5 website where each page/section is in a section id = "name"
How would i hide one of these sections for example the "Place and Order" section if the website was being viewed on a mobile device?
The website is here - http://mk18.web44.net/
If its possible , I would also like to hide the menu option for that perticular page.
You can add a media query for mobile devices.
#media only screen and (max-device-width: 480px) {
element {
display: none;
}
}
Reference the IDs for the sections you want to hide in a media query. To hide the "about" section on screens that are up to 600px wide:
#media screen and (max-width: 600px) {
#about {
display: none;
}
}
Im using section tags on my website.
This is the website - http://mk18.web44.net/
How would I hide the section that is called Place an Order on mobile devices?
Thanks
Add this to your css:
#media screen and (min-width: 0px) and (max-width: 400px) {
#order{
display:none;
}
}