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;
}
}
Related
I have a webpage that is 1800x1200px in dimension (made for desktop PCs). On tablets the page isn't viewed entirely, part of it spans over the right viewport. What I want to achieve is that the webpage displays correctly on tablets using a smaller zoomfactor. I'm absolute beginner with javascript, can anyone explain the js code to me to do that?
Try adding this in the <head> section
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Also you might have to use CSS media queries. If you are not familiar with that, Its better to learn it first.
For the time being, use the below media queries in your css
#media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
#media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets # 600 or # 640 wide. */ }
#media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
#media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
#media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
#media (min-width:1281px) { /* hi-res laptops and desktops */ }
Sample usage
/* Use a media query to add a breakpoint at 768px: */
#media screen and (min-width: 768px and max-width: 1023px) {
.main{
width: 80%; /* The main class's width is 80% , when the viewport is gretaer than 768px or smaller than 1023px which is ideal for tablets (not big tablets) */
}
}
You can use media queries for achieving this behaviour, example as follows -
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
This will apply a background color when the screen size will be 600px or smaller.
The best answer i can give right now is to use css zoom
body{zoom:30%}
body:after{content:"lol"}
Here, the web page is displayed in a 1349x659 browser window. (it's exactly the dimensions of the image). With the body width set to 60%, the content is nicely packed and easily read.
Here I have resized the browser window to 478x642. And you can see that the 60% body width no longer gives the good view.
Since the web page can be resized without the server even knowing, the solution must be in the client side. Or done in the css file.
I suggest this algorithm:
If the visitor is mobile, then the body width should be 100% regardless of any other thing.
If the visitor is not mobile (tablet, pc, ...) then (
If the width of the browser window is larger than the height, body width will be equal to the window height.
but if the width is less than the height, then the body width is 100%.
)
Here is a fiddle
https://jsfiddle.net/rawj7vxc/
<body>
Some posts are not public. To access them, please login to your account, or register if you have none yet. By logging in to your account, you're no longer considered a "guest", this has some benefits which come with account promotions. Seeing more posts is one of those benefits. Registered accounts need verification. You'll be told how to this after the first unverified login. The verification will, however, not be immediate.
</body>
body {
background-color: rgb(31,25,0);
width: 60%;
padding: 0;
margin: 0 auto;
font-family: consalos;
text-align: justify;
color: rgb(215,200,0);
overflow: auto;
}
You need to look into using media queries. These will allow you to cater your design to the width and height of your screen.
/* Large Devices, Wide Screens */
#media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
#media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
#media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
#media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
#media only screen and (max-width : 320px) {
}
Media Queries
You could use some framework like Bootstrap or media queries:
#media (min-width: 568px) {
.myDiv{
width: 550px;
}
}
#media (min-width: 992px) {
.myDiv{
width: 970px;
}
}
#media (min-width: 1200px) {
.myDiv{
width: 1170px;
}
}
Here you have more information: w3schools.com
And also about Bootstrap: getbootstrap.com
I think you could use the metatag viewport (see documentation here)
viewport element gives the browser instructions on how to
control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the
screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page
is first loaded by the browser.
In your head section, simply add following tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
If you want to add width: 60% only when the screen is "wide" you could use:
#media screen and (orientation:landscape) {
body {
width: 60%;
}
}
See here
I hope it helps you, bye.
Ok, here is my solution with pure javascript,
document.getElementByTagName("body").onresize=function(){
var fullwidth=screen.width;
var fullheight=screen.height;
if(fullwidth<aval){ //checking if mobile
/*
* make width 100%
*/
}
else
{
if(fullwidth>fullheight)
//make width = fullheight
else
// make width=100%
}
}
I have given you the logic structure only, if you want full css change(width and height change) code, mention here.
N.B. aval is the threshold value under which screen size device will be treated as mobile device
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 still don't have a solution can anyone help me with this must be easy. I think that the solution must be find in the javascript and not the media query, because that didn't work for me.
I got a responsive navigation that shows a nav-btn when screen is smaller than 1000px, but after using the nav-btn open+close the menu items disappear when resizing screen width, the horizontal menu items need to return in the place, but because of the js the menu-items disappear.
You see it when resize the screen so you see 4 menu items horizontal inline and when smaller than 1000px you see the responsive menu after open and close and resize the screen larger than 1000px 3 of the 4 menu-items are gone.
$(function() {
$('.nav-btn').click(function(event) {
$('nav ul').fadeToggle(300);
});
});
FIDDLE
I had same problem and solved it using CSS #media anotation:
#media screen and (max-width: 1000px) {
// your needed style here
}
Also if you have different sizes / needs check here.
IMPORTANT: to me I need to define ALL sizes to have correct behaviour when we have transitions in screen size, so to avoid weird things you must define something like this:
#media screen and (min-width: 769px) {
/* COMPUTER STYLES HERE */
}
#media screen and (min-device-width: 481px) and (max-device-width: 768px) {
/* TABLET STYLE HERE */
}
#media only screen and (max-device-width: 480px) {
/* MOBILE PHONE STYLE HERE */
}
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;
}
}