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;
}
}
Related
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;
}
}
I have 100% height and width container, then means if the resolution of the any screen is 100%, then the elements inside of the container is compressing if the resolution is not compatible in my position design, I want to have a responsive container with responsive elements inside of it but the elements will not compress. (Example try to resize the stackoverflow website, the elements is still the same.)
Here's my example code:
.container {
height: 100%;
width: 100%;
background-color: gray;
}
h1 {
text-align: center;
}
<div class="container">
<h1>Responsive Container</h1>
</div>
I am not sure about what is actually needed, if you want to restrict the elements from not being responsive above or below a particular value, you need to fix the container element to a fixed pixel width when the width is less/greater than particular screen value using media queries.
Refer CSS Media Queries
CSS:
.container {
height: 100%;
width: 100%;
background-color: gray;
}
h1 {
text-align: center;
}
#media only screen and (max-width: 500px) {
.container {
width: 500px;
}
}
In the below JSFiddle you can see that the elements is set to fixed width (500px) when the screen width is less than 500px.
JSFiddle Demo
I am making an website and it works perfectly on pc but when I try to preview on phone I got some problems.
Can anyone help me?
I got everything inside an div with this properties.
width: 960px;
height: 500px;
margin-top: 50px;
margin-left: 312px;
clear: both;
position: relative;
top: -250px;
position: static
Since you're giving the elements static heights it won't change when you switch to mobile platforms. Like Adarsh Mohan said, use #media rules. You can define what lay-out you want per size of the screen. For example:
#media all and (max-width: 320px){
.content{height:250px; width:500px;}
}
This CSS will only be applied to the div 'content' when the width of the screen is 320px (or lower).
Let's say I have
#media all and (min-width: 360px) {
#navigation {
background-color: #dddddd;
display: block;
position: fixed;
top: 0px;
}
}
#media all and (min-width: 760px) {
#navigation {
background-color: #111111;
display: none;
position: fixed;
bottom: 0px;
}
}
this kind of CSS code (assume that I have div id="navigation" tag in the body tag.).
But if I run this code and change the size of browser to see the difference, it won't change as the size changes. The CSS attributes in the first media query statement is applied to the style, except the display attribute.
How do I make the other attributes to behave as it supposed to be?
edit: Here's the codepen for my project:
http://codepen.io/thatkoreanguy/pen/mJwPBW
Ok so I am going to assume the main problem here is when you are going to 360px width your div is not sitting at the top of the view port its stuck at the bottom?
When you have a media query it still inherits previous styles if you want to negate any you would have to return them to there default value which for bottom would be auto I believe.
My footer is absolutely fine on a normal screen size but I want it to become invisible when I shrink the screen after a certain height.Any ideas how to do it without using javascript?My HTML and CSS snippets are as follows:
HTML:
<footer class="footer">
About
</footer>
CSS:
.footer{
position: fixed;
bottom: 0;
margin: 0;
padding: 10px;
width: 100%;
box-shadow: 0 0 3px white;
color:white;
}
jsFiddle Demo
Use a max height media query on your page in order to hide the footer. Note that this is compatible in almost all browsers, except IE8-.
html for demo
<div id="footer">Footer</div>
css
#media (max-height:150px) {
#footer{
display:none;
}
}
Use this:
#media screen and (max-width: 500px) {
.footer {
display: none;
}
}
DEMO and Source
Try a media query in your css document like so:
media screen and (max-height:700px) {
.footer {
display:none;
}
}
Media queries take a lot of different arguments, i.e. min-height, min and max width, etc. Mozilla dev covers the operators with great examples.