I'm experiencing this strange behaviour in my webpage https://vinoreo.mx .
The navbar is exceeding the viewport in mobile - live server. Localhost works fine.
It happens only in the "/" route, the other routes show correctly the viewport.
Before loading all DOM elements the viewport shows correctly, but once the elements update (react front-end) this is when the problem appears.
The SPA uses this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Live mobile view using iPhone 6/7/8 Plus as reference
Localhost view using same iPhone 6/7/8 Plus as reference
As you can see footer navbar simply disappears and also the whatsapp and cart buttons which are also fixed, and come from the main top navbar.
I have reviewed my style.scss file and I have not messed with navbar class widths.
.navbar {
padding: 0.5rem 10%;
}
#media (max-width: 991.98px) {
.navbar {
padding: 2% 2%;
}
}
.nav-link {
padding: 0px;
}
.navbar-text {
padding-bottom: 0;
}
I'm using React-bootstrap classes which I believe are the regular bootstrap ones.
It took me some days and several attempts on moving css and finally solved it by adding this to meta content tag:
initial-scale=1,minimum-scale=1
Related
I have tried everything. The body should not scroll as I run into issues with overscrolling on Safari iOS and Safari webapps (save to homescreen), so instead the main div "#content", has all the content with overflow scrolling.
The problem is, when #content is set to 100vh, the mobile bar, covers the bottom of the content. This is a common occurrence according to Google, and I've seen many solutions but the main one that worked is setting height: -webkit-fill-available;, but unfortunately this stops #content from scrolling on Chrome Windows.
main.css (with scrolling not working on Chrome Windows)
body, html {
padding: 0;
margin: 0;
color: white;
background-color: black;
overflow: hidden;
}
body {
position: fixed;
}
#content {
/* height: 100vh; Scrollbar present (good) on Safari iOS, Chrome iOS, Chrome Windows, but
bottom of page blocked by browser menu bar on Safari iOS and Chrome iOS (bad) */
height: -webkit-fill-available; /* Scrollbar present on Safari iOS, Chrome iOS (good), scrollbar
present but no actual bar to scroll down present
on Chrome Windows, can't scroll down (very bad), bottom of page
not blocked by browser menu bar on Safari iOS, Chrome iOS (good) */
width: 100vw;
overflow-y: scroll;
}
index.html
<!DOCTYPE html>
<html lang="en-gb">
<head>
<meta charset="utf-8" />
<title>React App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="./main.css">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div id="content">
<b>START<br/>3<br/>2<br/>1<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>1<br/>2<br/>3<br/>END<br/></b>
</div>
</div>
<script>
// Stops overscrolling on "saved to home page" webapps
window.addEventListener("scroll", (e) => {
e.preventDefault();
window.scrollTo(0, 0);
});
</script>
</body>
</html>
Probably goes without saying but, this isn't the actual page, it's how it would be constructed with React.
Sorry if I haven't provided enough detail, please say if you need any information—I'll provide it; I'm at my wits' end, I am 15 years old and I've been trying to make this page how I want it for days now.
Images and videos to show
Chrome Windows, height: 100vh; (wanted behaviour, can scroll)
Chrome Windows, height: -webkit-fill-available; (unwanted behaviour, can't scroll)
Safari iOS, height: 100vh; (unwanted behaviour, bottom of page blocked by Safari menu bar)
Safari iOS, height: -webkit-fill-available; (wanted behaviour, bottom of page not blocked by Safari menu bar)
1 and 4 are what I want to achieve.
Thank you so so so much if you can help me :)
This works but it uses Javascript, not too heartbreaking as I already had to use it to stop the overscroll. Kind of annoying how much Javascript you have to use to combat Safari!
const resizer = () => {
document.getElementById("content").style.height = window.innerHeight + "px";
}
window.addEventListener("resize", (_e) => resizer());
document.addEventListener("DOMContentLoaded", (_e) => resizer());
You say you tried everything so this a bit silly of me to ask but have you tried #media?
#content {height: 100vh; ...}
#media screen and (max-width: 767px) {
#content {height: -webkit-fill-available;}
}
If you tried this, what the result?
I'm trying to get a button to have a responsive width based on the screen size. I've got it so it works perfectly when I resize a regular Chrome window, but when I toggle the display to mimic a device (any mobile device/ipad/etc.) the width of the button immediately gets much smaller. It looks the same even when I open it on my iPhone, so it's not just some weird issue with Chrome's tools. When I inspect the element, I can see that width has been disabled:
I thought there might be some CSS overriding it, but then that doesn't explain why this behavior disappears entirely when I'm simply resizing Chrome or even picking one of the devices with wider resolutions than any of my rules. I have still tried removing all of my #media rules and the behavior persists.
The button is pretty basic HTML, and it's not even wrapped up in a div that could be causing the issue (unless the fact that there's a flex box right under it could be a problem?):
<body>
<button id="ranking-button" type="button" onclick="openRanking()">RANKING</button>
And all of the relevant CSS is here:
#ranking-button {
position: fixed;
top: 0;
right: 0;
margin: 20px;
font-family: 'Black Han Sans', sans-serif;
font-size: 24px;
color: black;
background-color: #ffcc00;
width: 40%;
height: 60px;
cursor: pointer;
border: 0em;
}
#ranking-button:hover {
background-color: black;
color: white;
}
button:focus{
outline: none;
}
#media (min-width: 600px) {
#ranking-button {
width: 200px;
}
}
I've also tried adding !important to it, and it then did work for mobile - but then stopped changing for any other resolution and was stuck at 40% all the time.
I'd given up on this minor side project, and then randomly realized what I'd done wrong while doing something completely different - in case anyone makes the same mistake as me, I'd managed to forget to set the viewport. Adding this made the CSS work:
<meta name=viewport content="width=device-width, initial-scale=1">
When you use a #media query, it does anything inside it when the 'rules' inside the brackets are accepted.
So, if you say that max-width:1000px then, if your browser is 600px then anything inside it will apply, if not, then it will be ignored.
For screens smaller than 600px, your normal #media css rule will be accepted and there you said width:40%, and you can't measure in %.
#media only screen and (max-width: 600px) {
#ranking-button {
width: 200px;
}
}
I am working on making a theme mobile responsive. You can view it here, http://107.170.168.111/
When viewing on desktop and resizing the browser, it works fine. However, on actual mobile devices it doesn't seem to be working correctly (the sidebar should be hidden and a mobile nav should appear). It works on single post views such as: http://107.170.168.111/2015/04/27/szechuan-green-beans/#more-9327
but not on the actual index. I can't seem to figure out why.
My media queries, of course, are at the end of my CSS document:
#media screen and (max-width: 640px){
.hide-for-small{
display: none !important;
}
.show-for-small{
display: block !important;
}
.sidebar-container{
display: none !important;
}
#sidebar{
display: none !important;
}
.wrapper{
width: 100%;
}
#content{
position: relative;
display: block;
margin: 0;
width: 100%;
padding: 110px 0 0;
}
}
and in my <head> i have <meta name="viewport" content="width=device-width, initial-scale=1">
I'm pretty stumped, any suggestions? Thanks!
Update:
meta viewport is located in header.php - which is included on index.php, but for some reason is not being displayed. The same code is used on single.php which works.
Header.php -> https://gist.github.com/buschschwick/a7f67176e748c08e314a
Single.php -> https://gist.github.com/buschschwick/d3e2bdff07fffcb4b01a
Index.php -> https://gist.github.com/buschschwick/56576b2294b160271a3a
Solved:
A disabled caching plugin was still serving the old version of index.php that did not include the meta viewport. Thanks everyone.
Change your #media from "screen" to "all". You are targeting all devices not only screens:
#media all and (max-width: 640px){
// your css
}
EDIT:
When you view your source code, you cant find any meta tag for "viewport". I used your code and added viewport in my editor and it worked just fine:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Problem: the index page does not have meta viewport. You need to add that in index page.
I am using the following html code to hide the registration buttons on www.eventbrite.com:
**
<style>
#ticketInfo {
display: none !important;
}
#TicketReg {display: none !important;
}
#see_whos_going .panel_head2 {
margin-top: -27px;
}
#OrderReg {display:none !important;}
</style>
This works fine on desktop, but does not seem to work on mobile devices e.g. iPhone. I am a coding novice, so any sugestions would be much appreciated!
Any ideas?
The mobile optimized view of the Eventbrite event pages don't render the HTML/CSS that are added to the custom header by the customer/event organizer (unlike the desktop version where you can essentially add your own CSS to overwrite any style element).
I'm working on a small project for school, where we have to incorporate html5 and css3. It's just in the begin stage now, as I'm trying to create two separate css-files for a mobile and a desktop version.
For the mobile version, I'm trying to get the menu to just show as a list, but with a bigger font. I can in no way get this working though.
This is the css for the menu:
nav ul {
list-style: none;
background-color: green;
padding: 0;
}
nav li {
border-bottom: 1px solid black;
padding: 5px;
}
nav {
margin-top: -36px;
width: 100%
}
nav h1{
margin: 0;
}
This creates the following on my desktop
And on my iPhone
The font-size is set to 1em in the HTML in the top of the file. But 1em is not big enough for mobile devices, so I want it bigger, which seems impossible.
Even when I give the nav h1 a font-size of 10em, it doesn't get bigger than this:
While on my desktop it does work without a problem, there it looks like this:
The same problem occurs when trying to make the "blog posts" bigger, they just won't do it.
I normally have no trouble working with CSS, but this time I can't figure it out. Hope anyone can help! I have the feeling it's something very obvious.
Here is the complete CSS: http://snipt.org/zLic5
Here is the html: http://snipt.org/zLid2
i saw your html code. you are not adding any meta tag. certain meta tags are required, when you are developing mobile website,
for example you have to add -
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
<title>Welcome to your school name</title>
<!-- smart phone css -->
<link href="assets/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" />
<!-- Tablet -->
<link href="assets/tablet.css" rel="stylesheet" type="text/css" media="all and (min-width: 481px) and (max-width: 800px)" />
<!-- Desktop -->
<link href="assets/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:801px)">
I see a couple things I think can help your situation. Semantically, you don't want to use <h1> tags in your menu list at all. Remove those tags and apply the styling to the nav li css style and adjust the padding accordingly. Also, just a recommendation, but I've heard from a few websites that the ideal mobile font sizing is pt.
I hope this helps.
Go back to using the li for you navigation.
Then set the font-size to something acceptable (14px or 16px).
Then, in your css, use media-queries.
#media (max-width: 480px) { // will only happen on viewport less then 480 pixels (mobile)
li {
font-size:18px; // larger font (or whatever you want to do
padding: 20px; // can even increase your padding
}
}
Try css property text-size-adjust to scale text on mobile devices. Something like:
nav {
text-size-adjust: 200%;
}
nav ul {
text-size-adjust: 300%;
}
nav h1 {
text-size-adjust: 400%;
}