I know this is supposed to be the default behavior and that some people are looking for ways to prevent this, but in my app the address bar does not become minimized on both Chrome and Safari and I'm not sure how my code is preventing it.
I tried different combinations of height, overflow, display and position in html, body and root but neither worked.
These are my current CSS definitions:
html, body, #root {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
display: block;
font-family: -apple-system, BlinkMacSystemFont, "Lato", "LatoBold", "LatoBlack",
"LatoMedium", "LatoLight", sans-serif;
}
body {
overflow-y: scroll;
overflow-x: hidden;
}
#root {
position: relative;
}
Related
I often float images either left or right around text on desktop but I want them centered for small mobile devices and the paragraph to drop below the image using Responsive design. I've got the paragraph dropping below the image using an online mobile viewing device but not when I try to view it via my computer. The image won't center online or on my computer.
Here is what I have found after many hours of research:
I have this set up for all images:
img{
border:0;
max-width:100%;
height:auto;
}
I have this set up for all paragraphs: it pushes the paragraph down below a floated image when the width of the paragraph is less than 10em (about 200 px).
p:before{
content: "";
width: 10em;
display: block;
overflow: hidden;
}
I have applied the following for images to media queries less than 320 and max of 480:
img{
max-width:100%;
display:block!important;
margin:0 auto !important;
float:none !important;
}
(i had to add !important to some of them or they wouldn't take but it's still not accepting margin: 0 auto; )
Can anyone see what I'm doing wrong?
Here you have a working update of what you need: http://jsfiddle.net/ancpjmet/3/
I changed min-devide-width to min-width and max-devide-width to max-width to be able to see the changes on my desktop browser in Google Chrome.
You have to set the div wrapping the img to float: none;, not the img:
#media only screen and (min-width:320px) and (max-width:480px) {
#image-wrapper{
float: none !important;
}
#image-wrapper img{
max-width: 80%;
display: block;
margin: 0 auto;
}
}
I also rebuild your .clearfix class to be more consistant and work in all browsers:
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0; }
.clearfix:after {
clear: both; }
.clearfix {
zoom: 1; }
Take a look at the changes in the jsfiddle given.
I am currently building a standard html web page. I have a logo in the top right corner. When I resize my browser the logo disappears. It works like it should in all other browsers.
It seems to disappear when my browser is small enough to convey mobile versions and navigation stops being inline and is displayed block
i dont think its an html problem, as it works in other browsers so here is my css for the image.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto;
height: auto;
}
Try adding a min-width. Change 300 to whatever works best. You can also use a min-width %. Like, 20%.
img#logo {
min-width: 300px;
}
edit:
Ok, now I see the real problem, its this
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%;
width: auto; // width auto...
height: auto; // height auto..
}
please change those to an actual value so you don't rely on varying browser defaults.
img#logo {
margin-bottom: 10px;
color: #111111;
max-width: 100%; // and you can remove this line
width: 100%;
height: 100%;
}
If that still does not work for you. Try removing the height line all together.
I've spent an entire day struggling with an issue that has occurred with mobile devices such as iPhones, iPads and an Acer tablet. I haven't been able to check with other devices but the problem seems to be quite universal when it comes to mobile devices.
Here are the first three css elements I use:
* {
margin: 0;
padding: 0;
}
html, body {
background: #f1f1f1;
margin: 0;
padding: 0;
}
#page-wrap {
background: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
The point here being that I have a bunch of 1200 pixel-wide <div> elements with content placed inside other, browser-wide elements. So, first, I use css to make my site use all of the browser window and then add <div> elements like this one and center them:
#featured {
background: #282828;
width: 100%;
height: auto;
padding: 0;
}
#featured #inside {
background: #282828 repeat;
width: 1200px;
height: auto;
margin: 0 auto;
padding: 50px 0 50px 0;
}
And here's the issue:
I'm currently using this code to define a fixed position background image for a <div> element:
#banner_index {
background: url(../images/banner/index.jpg) no-repeat center center fixed;
-webkit-background-size: 2000px 1333px;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
height: 600px;
margin: 0 auto;
padding: 0;
}
While this makes the background look perfectly fine on all the necessary desktop browsers, all the forementioned mobile devices (regardless of the browser app used) display the background image smaller, ie. not completely stretched out to fill the <div> element.
More to my demise, I've created a header <div> for the site above the #banner_index element, which has a top border of 3 pixels. Here's the code for that one:
#header {
background: #f1f1f1;
width: 100%;
height: auto;
margin: 0 auto;
padding: 20px 0 20px 0;
border-top: solid #282828 3px;
}
Much to my surprise, this border, and in fact the whole <div> seems to be sliced to the same width as the background image on the #banner_index element right below it.
I realize that mobile devices have problems with the fixed code in the background: element but all the workarounds I've managed to find seem to be of no use. Especially when the border-top: element has nothing to do with background images.
Anyone care to help a frustrated enthusiast out?
I'd like to keep my site Javascript-free and thought maybe a more simple css solution is out there.
Therein lies the rub.
I'm trying to show a popup when someone clicks on a youtube thumbnail. This works fine in Chrome but the click event isn't firing in Firefox.
I've managed to cut the problem down to what I've got below (Fiddle here)
<div class="Youtube">
<img class="Thumb" src="http://img.youtube.com/vi/RsYlGFBEpM4/mqdefault.jpg" alt="Marrakech"/>
<img class="PlayButton" src="http://ec2-54-229-110-227.eu-west-1.compute.amazonaws.com/Content/images/VideoPlay.png" alt="Play button"/>
</div>
The attach is happening fine but the handler doesn't get called in Firefox
$(".Youtube").click(function () {
alert('clicked');
return false;
});
I suspect it's something to do with the positioning/layout of the div or images
.Youtube
{
margin: 5px;
width: 320px;
height: 180px;
overflow: hidden;
cursor: pointer;
border: solid 5px #f00;
position: relative;
}
div.Youtube img.Thumb {
position:relative;
z-index:-1;
}
.Youtube img.PlayButton {
height: auto;
width: 160px;
position:relative;
left:20px;
top:-160px;
z-index:-1;
opacity: .7;
}
Can someone point out my mistake? (I've just noticed the border of the div catches clicks are appropriate, just not any content)
Try : This updated jsFiddle - removed superfluous use of z-index property.
.Youtube
{
margin: 5px;
width: 320px;
height: 180px;
overflow: hidden;
cursor: pointer;
border: solid 5px #f00;
position: relative;
}
div.Youtube img.Thumb {
position:relative;
}
.Youtube img.PlayButton {
height: auto;
width: 160px;
position:relative;
left:20px;
top:-160px;
opacity: .7;
}
With a positive z-index set on .Youtube class works fine on FF too.
Code:
.Youtube
{
margin: 5px;
width: 320px;
height: 180px;
overflow: hidden;
cursor: pointer;
border: solid 5px #f00;
position: relative;
z-index: 1;
}
I'm searching for the reason on the net...
Demo: http://jsfiddle.net/IrvinDominin/6Zkua/
EDIT
I think the reason why is that we are defining all the elements in the same stacking context relative, but firefox in this context assume undefined if the z-index is not set so the element will be always at lower index.
Reference: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
Explicitly adding z-index to Div makes it work on firefox
z-index:0
http://jsfiddle.net/LsqAq/3/
I am trying to create a button with "caps" on either end, and a repeating background, in order to keep the button a flexible size.
In order to do this, I have used the :before and :after pseudo-elements in CSS, along with position:absolute to get it outside of the main button's background-covered space (using negative values).
It works in FF and Chrome, but it looks like in IE8 and 9, the images are there, but are "outside" the button, and therefore are hidden. Does anyone know how to pop these pseudo-elements "out" of the button, so that they will render?
I want to keep the HTML to just the <button></button> element, and am using SASS.
You can see a jsFiddle here: http://jsfiddle.net/Dqr76/8/ or the code below:
button {
display: inline-block;
zoom: 1;
*display: inline;
border:0;
background-image: url(../images/btn_bg.png);
background-repeat: repeat-x;
color: #fff;
font-weight: bold;
height: 22px;
line-height: 22px;
position: relative;
margin: 0 5px;
vertical-align: top;
&:before {
display: inline-block;
height: 22px;
background-image: url(../images/btn_left.png);
width: 5px;
position: absolute;
left: -5px;
top: 0;
content: "";
}
&:after {
display: inline-block;
height: 22px;
background-image: url(../images/btn_right.png);
width: 5px;
position: absolute;
right: -5px;
top: 0;
content: "";
}
}
Just a sidenote, before someone brings it up, I know that these pseudo-elements do not work in < IE8, and have created a work-around that is not effecting this problem.
Add overflow: visible; to the button element, and it shows up.
Demonstrated at this jsFiddle
I swear I tried that already, but I guess not. Thanks to this question