I'm having a problem with the mobile version of a responsive website I'm building.
See that green "info" DIV that appears at the top left corner of the full-screen version of the site?
I need it to move down and live at the bottom of the screen - right above the footer DIV that has all the links - on the mobile version of the site.
Here's the full-screen version:
Here's the Mobile version:
Here's my CSS for the regular full-screen layout:
#productHoverDIV {
z-index: 20;
position: absolute;
top: 10px;
left: 10px;
width: 300px;
padding: 8px;
}
And here's the mobile rule:
#media screen and (max-width: 414px) {
#productHoverDIV {
z-index: 20;
position: absolute;
bottom: 40px; // that's the height of the FOOTER DIV below it
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
The issue is that even though I'm telling the productHoverDIV to be 40px from the bottom on the mobile layout, it still keeps it's top:10px value from the regular CSS rule, and ends up covering almost the entire screen.
So I need to somehow cancel-out the top rule - or override it with a different value, except
I have no idea know what value to put from the top cause every mobile device has a different height.
How do I resolve this?
You should change it back to its default value, which is auto.
Removed the duplicated z-index and position values.
#media screen and (max-width: 414px) {
#productHoverDIV {
top: auto;
bottom: 40px;
width: 100%;
padding-top: 0px;
padding-bottom: 0px;
}
}
Related
I'm creating a website that opens a popup when you click on a certain element. My popup is a with the following styling (simplified from what I actually have, but this shows the problem):
.popup {
position: fixed;
width: 75vw;
height: 85vh;
top: 10%;
left: 50%;
transform: translateX(-50%);
background-color: gray;
overflow-y: scroll;
}
Now, it works perfectly on desktop: I get a scrollable popup that's 85% of the viewport, positioned correctly. Looks like this:
However, when I open the website on mobile, the popup is cut off at the bottom. Looks like this:
It should have some empty space at the bottom, just like on desktop.
I tried adding bottom margins and paddings, but nothing helps. I don't understand why this is happening. Also it's hard to debug because if I open it in mobile mode on desktop browser, everything looks correct. And when I created a CodePen with my code and opened it on mobile, it also showed fine. Please help.
I don't think your issue is with css at all and more about that bar at the bottom of the phone. I know you mentioned that you tried margin and padding and that wasn't working, but did you happen to do them on the paragraph element itself?
Underneath .popup, you can put .popup p {margin-bottom: 50px;}. This should solve your issue. You will have to play around with the distance from the bottom of the div to find what works for you.
.popup {
position: fixed;
width: 75vw;
height: 85vh;
top: 10%;
left: 50%;
transform: translateX(-50%);
background-color: gray;
overflow-y: scroll;
}
.popup p {
margin-bottom: 50px;
}
or you could simply add a media query
#media only screen and (max-width: 800px){
.popup p {
margin-bottom: 50px;
}
I've a fixed positioned div which is not sticking to the corner in mobile devices.
Also, the div is not visible if values other than top:0;left:0; is added to fix the position in other corners.
I've a media query for mobile devices.
#media only screen and (max-width: 767px) and (min-width: 220px)
{
#chatbotOut {
position: fixed;
z-index: 2147483001!important;
max-height: none!important;
right: 0!important;
bottom: 0!important;
border-radius: 0!important;
}
}
The issue can be found in here.
Switch to devtools of chrome and select any mobile device and see.
This seems to be a pretty standard situation but the HTML/CSS is behaving oddly. I'm in the process of building a profile page for a game and am also looking at mobile responsiveness. I can't seem to get the right-margin to go away. It's not a problem in portrait mode (using a Chrome mobile emulator extension) but in landscape, the div + margin is too wide and a scrollbar appears.
HTML:
<div class="userProfile" style="display:none">
<div class="profileTop">
<div class="profilePicture">
<img src="somepicture.png"></img>
</div>
<div class="profileName"></div>
</div>
</div>
CSS:
.profileTop {
position: relative;
top: 10%;
left: 15%;
width: 70%;
height: 12%;
margin: 0;
}
.profilePicture {
display: inline-block;
width: 12vw;
}
.profilePicture img {
width: 100%;
height: auto;
vertical-align: top;
}
.profileName {
display: inline-block;
position: relative;
font-family:Stencil;
font-size: 1.3em ;
font-weight: lighter;
color: white;
left: 20%;
top: 35%;
}
What's odd is that if I decrease the width of the "profileTop" class, the right margin grows so that the whole thing is the same width. Any help?
EDIT: I can get a workable solution by reducing the width of "userProfile" but it's still bothering me that this won't work as originally intended.
EDITx2: The margin also exists on the "userProfile" div. I suppose the "profileTop" div is following its parent somehow but even if I add margin-right: 0 attributes to both divs, the margin is still there. The parent of "userProfile" is the body.
Error in HTML code, you don't need a closing tag for image.
Secondly, you can use media queries to achieve that. Media queries even have an option for landscape and it's really easy to use. Good luck
#media (min-width: 700px) and (orientation: landscape) { ... }
P.S. Use codepen or jsFiddle second time, it will be WAY MORE simpler to help you.
EDIT: Added media queries example
You need to use a more specific selector to override the initially-assigned CSS attribute.
#media (max-width: 768px) {
div.userProfile div.profileTop {
margin-right:0;
}
}
I am having issues making the sprite I have resize, when I resize browser window.
The remiander of the template is repnsive including the Nav Menu.
The sprite remains fixed and sticks out of the page when resizing.
How would I make it size like the rest of the template (removing the width scroll bars)
If you just remove the sprite everything displays correctly.
I have created a Fiddle but its not showing the when I click results.
I have uploaded the page to here:
Test Page
Thank you.
Perfect Solution I have Got U can Use
I have used This solution
And It works Fine on all browser except Android Browser
.playerSp
{
display: block;
background: url(blue_sprite.png) no-repeat;
}
.next-button
{
background-position: -83px -6px;
width: 41px;
height: 46px;
}
var abc=(screen.availHeight+screen.availWidth);
$( window ).resize(function() {
var aaa=($(document).height()+$(document).width());
scale=abc/aaa;
$('#playerContainer').css({ 'zoom': (1/scale), '-moz-transform': 'scale('+(1/scale)+')', '-moz-transform-origin': '0 0 ' });
});
</script>
So I was stuck with the same question and noticed the answer was not yet given here.
Here is the answer:
I've managed to make my sprite fully responsive. For this I didn't use any slicing (photoshop) or javascript. Also notice how the sprites are positioned absolute and yet still responsive according the background.
For a better understanding of this process, please see the following link: http://brianjohnsondesign.com/unlisted/demos/responsivesprite/
Also see my link in order to see how it looks on my website: http://demo.chilipress.com/epic3/
Should my link not work anymore, try the first link above.
See here the CSS and HTML
#sprite1_contact{
background-image: url('sprite_contact.png');
width: 35.2%;
height: 0;
padding-bottom: 7%;
background-position: 0 0;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 32.3%;
z-index: 2;}
#sprite2_contact {
background-image: url('sprite_contact.png');
width: 27.5%;
height: 0;
padding-bottom: 28%;
background-position: 0 27%;
background-size: 100%;
display: block;
top: 0;
position: absolute;
margin: 0 0 0 35.8%;
z-index: 1;}
HTML
<div id="sprite1_contact"></div>
<div id="sprite2_contact"></div>
your sprites have fixed height: 632px; & width: 1163px; if you want them to resize youshould add at least a min-width and a min-heigth properties
example, if you want your sprites resize to a minimum of 10 px lets say you would add those properties to your code
#sprite-main-v2 {
height: 632px;
width: 1163px;
min-height:10px; /*added this line*/
min-width:10px; /*and this line*/
background-image: url(../images/landing-page/landing-sprite-5.png);
background-repeat: no-repeat;
background-position: 0px -700px;
cursor: pointer;
}
you can also use media queries to change the image acording to screen width or height: example:
#media screen and (max-width: 980px) {
#sprite-main-v2 {
height: 100 px; /*new size*/
width: 100 px; /*new size, value just as example*/
background-image: url(../images/landing-page/landing-sprite-5-small.png);/*smaller image*/
}
}
Shrink your sprite to a smaller set size by adjusting its background-position and background-size css properties in a media query.
background-position: 0 -135px;
background-size: 170px 190px;
Those number are an example, you have to play with them to get it to line up with your sprite, which can be confusing as the image can disappear. Recommend adjusting them bit by bit in developer tools.
You can also use percentages to allow for a more responsive resizing, although this can get tricky too.
Note, background-size doesn't work on IE8 but neither do media queries....
I have a div box with an absolute position fixed to the left side of a page. It looks great on PC's and is doing its job of being unobtrusive to the user. However, when the page is loaded from a mobile device, the left side of the screen is no longer way off to the side, it is on the edge of the content so this absolute box now covers a little bit of the content on the left. My goal is to only show this one specific div box to PC's, while preventing it from loading on mobile devices.
CSS:
.harry {
float: left;
padding: 5px 0 0 0;
margin: 0;
position: absolute;
left: 0px;
top: 100px;
z-index: 999999;
}
HTML
<div class="harry">
<big><p><img src="images/side-harry.png" height=200 /> </p></big>
</div>
One way is to just set a CSS3 media query, and hide that div when a mobile device is detected:
#media screen and (max-device-width: 480px) {
.harry {
display: none;
}
}