Hi everyone.
I'm currently working on a website for my company, and right now I'm facing a problem with the navigation menu, specifically on mobile devices, or should I say, mobile browsers(most of them).
The hamburger icon is clickable when the browser's search bar is expanded, but becomes irresponsive when scrolling down(as the search bar becomes shrank).
It does work however on Chrome browser, as it doesn't shrink the search bar, but any other browser that I have tried refuses to do so. (Safari, Firefox, Samsung Browser, etc.)
I'm not sure how can that affects the hamburger menu, as it works perfectly on Chrome/Safari with Inspect element on mobile modes.
Here is my website (still work in progress)
From my current testing, I suspect your navigation pop up menu is slightly too big to pop up in Mozila Firefox default mobile size. If I flip the mobile size to landscape, you will be able to see the responsive of your navigation menu.
I will suggest you to try make the navigation menu to be smaller in width in your css code which will solve your issue with minimal editing.
Again just suggesting only this may not be the best solution but I personally feel that it works.
Regards,
JJSIMCYBERTECH.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div class="nav">
<h1>(Website Name)</h1>
<input type="search" class="searchbox">
<button class="btn">(Element)</button>
<button class="btn">(Element)</button>
<button class="btn">(Element)</button>
<button class="btn">(Element)</button>
</div>
<style>
.nav{
background-color: lightgreen;
border: 2px solid white;
/* choose your color */
color: red;
}
.searchbox{
background-color: gray;
width: 300px;
height: 35px;
color: white;
}
.btn{
border: none;
background-color: #184a26;
}
.btn:hover{
padding: 5px;
}
</style>
</body>
</html>
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 have a container page which loads an iframe, which is set to 99% width and height. The content of the iframe is responsive, using media queries. The container page happens to also be responsive, using media queries, but I don't think that's particularly important here.
This works fine on modern browsers, and on iPhone 6, but it doesn't work on iPhone 5. The 5 is entirely ignoring the media queries.
You can test this using Chrome's iPhone 5 emulator and the problem is immediately visible. Using the sample code below, the paragraph should have a border color #f00, but instead it remains #ccc. I also verified on a real iPhone 5 and it matched Chrome's emulation.
Note that if you load the iframe content in a separate page, the media queries work just fine on iPhone 5 - the problem only occurs when loaded inside an iframe.
Has anyone found a way to make this work? Am I going to need some kind of javascript hack?
Container Source Code (container.htm):
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<iframe src="iframeContent.htm" style="border: none; height: 99%; width: 99%; margin: 0px; padding: 0px;"></iframe>
</body>
</html>
Iframe Source Code (iframeContent.htm):
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
p { border: 1px solid #ccc; }
#media screen and (min-width: 310px) {
p { border: 1px solid #f00; }
}
#media screen and (min-width: 350px) {
p { border: 1px solid #00f; }
}
</style>
</head>
<body>
<p>here is a paragraph of content.</p>
</body>
</html>
Arg, the problem had nothing to do with the media queries not being supported via iframe, or with iPhone 5.
With the iframe being 99% width, and the default 8px margin on the body element, the content inside the iframe thought that the screen was only 301px wide, which was too small to be covered by the 310px width media query, and there were no other rules that caught it.
I fixed it by making the base media query 200px.
#media screen and (min-width: 200px) {
p { border: 1px solid #f00; }
}
I am trying to make a really simple CSS hover. It works fine in IE, Edge, Chrome and Firefox, but doesn't work for Safari (9.1) on Mac.
Have searched the internet and Stack Overflow for a fix, but no joy.
Found this simple example on codepen. That works on safari.
BUT: If i take that code, put it into a plain html document and serve it from Azure, it does not work on hover. You have to click on/off the element for the bit that should show on hover to appear. Oddly, if I use the web inspector and toggle the hover state, it works. Example code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style>
#thumbnail {
display: block;
width: 150px;
height: 150px;
}
#thumbnail:hover + #title {
display: block;
}
#title {
display: none;
color: #ffffff;
background-color: #000000;
text-align: center;
width: 130px;
padding: 10px;
}
</style>
</head>
<body>
<a id="thumbnail" href="#"><img src="http://dummyimage.com/150x150/0066ff/fff"></a>
<div id="title">filename.jpg 1</div>
</body>
</html>
I then created a plnkr to see if something extra was going on in codepen. The plunk also works in Safari on Mac.
What do I need to do to get it working in a standard page please?
I have tested your codepen example and even created a HTML file with the contents above and tested it again in Safari 9.1.1 - all working absolutely fine.
You may find the issue is Safari caching your content from Azure, can you clear the web browser cache and retry the issue?
Perhaps there's a cache on Azure that needs clearing also?
I want to know how I can change the style of the scroll bar of a browser window using CSS. I want to change it's color and width so that I can make the webpage look more attractive and comforting for users. Can I do this with CSS or should I use any other languages to do that?
I would also like to know whether styling scroll bar of a browser window affects page load speed and smoothness since I have seen websites with custom scroll bars which lags while scrolling.
I want to change the following
1. Width
2. Color of scroll bar
3. Color of scroll bar background
Here is a sample page with long enough to display a scroll bar. You may show me how to add the effect on the code below.
Sample structure code below:
HTML:
<html>
<head>
<title>
Sample Page
</title>
</head>
<body>
<div class="main">
</div>
</body>
</html>
CSS:
body{
background:#C0C0C0;
}
.main{
height:1200px;
width:1000px;
}
Also try to include the code which works with all browsers like Google Chrome, Firefox and especially IE
You can design the scroll bar easily with CSS.
body{
background:#C0C0C0;
}
.main{
height:1200px;
width:1000px;}
body::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar-track {
background:green;
border-radius: 20px;
}
body::-webkit-scrollbar-thumb {
background-color: red;
border-radius: 20px;
}
for more information you can refer here. : https://www.webkit.org/blog/363/styling-scrollbars/
Got it. The CSS for chrome is given above and for IE IS given below
CSS:
body{
scrollbar-face-color: #EEC800;
scrollbar-shadow-color: #006cb4;
scrollbar-highlight-color:#006cb4;
scrollbar-3dlight-color: #006cb4;
scrollbar-darkshadow-color: #006cb4;
scrollbar-track-color: #006cb4;
scrollbar-arrow-color: #C1C1D1;
}
So I am trying to develop a simple mobile website. It will go off a QR code to the page linked below. The problem is when I view it on my android phone, or apple phone it adds a huge width. Any suggestions would be great. Here's the link to the live version: http://www.trileafweb.com/promotion/index.html
Here's the HTML/CSS
Promotion
<style>
html,body
{
width: 400px;
height: 200px;
}
h1{color:#00a94f;
text-align:center;}
p{
font-weight:bold;
font-size: 14;
text-align:center;
font-family:Arial;}
img{
position:relative;
height:100px;
width:200px;
padding-left:100px;}
#coupon{
padding-top:15px;
position:relative;
border: 3px dashed;
width: 400px;
height:200px;
border-radius:5px;}
</style>
</head>
<body>
<div id="coupon">
<h1>Promotion</h1>
<p>Promotion Texts</p>
<p>Coupon Code: <span style="color:red; font-size:24;">xxx-xxx</span></p>
</div>
</body>
Are you including a meta tag telling the mobile browsers that you understand how their viewports work? Something like this:
<meta name="viewport" content="width=device-width" />
More information about why this is necessary:
If you think about it logically, it seems to make sense: mobile Safari took a look at the page and assumed it was a document designed for the desktop, which is true of the vast majority of websites. So it gave the website a width of 980 pixels and presented it zoomed out. Which is why we can’t read anything until we zoom into the page....
But this is no good! What we need to do is tell the browser that this webpage is optimized for mobile. And this is where the viewport metatag comes into the picture.