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).
Related
I know this question appeared here a few times, but I didn't find the answer I am looking for in them.
Basically I created web for 800x600 resolution, as I want to adjust web for different resolutions on desktop from this point. Before I go on, I want to ask, which is the best option, to use % or px for defining elements ?
So let's say I got web which I want to adjust to different resolutions. There is about 12 available of them for desktop. If I want that web to look properly on each, I should code it for each,right ? What is the best way to target screen resolution ? 800x600 works well, 1024x600 works too. However 1024x768, for some reason is not being targeted. Here I ll post the code:
.scene {
padding: 0;
margin: 0;
}
.fill {
position: absolute;
bottom: 0%;
right: -1%;
left: -2%;
top: -10%;
}
.expand-width {
width: 101%;
}
#media only screen and (min-width: 1024px) and (max-height: 600px){}
#media only screen and (min-width: 1024px) and (min-height: 601px){
body{background-color: red;}
.fill {
position: absolute;
bottom: 0%;
right: -1%;
left: -2%;
top: -10%;
}
.expand-width {
width: 101%;
}
}
Firstly you are using media queries so % or px is not an issue as media queries is ther for resolving that issue only. but for true responsive ness you can go for %.
Next you are designing for 1024*600, so 1024*768 is included in it that's why ir is not effecting the code.
Try !important for 1024*768 resolution styles.
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 have 2 divs (logoarea and navarea) inside a bigger div (id=header). How do I make navarea be fluid (resize if the page is resized) without making it overlap into div logoarea? I'm new to stack overflow and its formatting is a bit confusing, so ill just leave a jsfiddle link with my code, I think it's better anyway. Help is greatly appreciated, here is my code(All of my code including the HTML is on the jsfiddle link):
#navarea {
width: 630px;
height: 100px;
float: left;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 150px;
margin-right: 0px;
}
http://jsfiddle.net/070zgvq2/
Well you can resize them using media queries like this-
#media only screen and (min-device-width: 320px) and (max-device-width: 480px){
#navarea {
/* change size */
}
}
This will work for devices that have screens less than 480px wide.
Also i'd recommend not using pixels but percentages for sizes to make it more responsive!
Hope it helps.
I have a website that is totally responsive however there is one part that is not ans is situated below the slogan URBAN FREE SPIRIT (I am talking about the images)
I tried to had the class container, the class img-responsive but nothing seems to work ..
Here is my website, it will be easier to have a look through the inspector I think than with copy paste
http://v1954132.caqoajqezbu9.demo42.volusion.com/
.home-stage-v2 isn't responsive.
.home-stage-v2 {
width: 1000px;
height: 1200px;
position: relative;
margin-top: 25px;
}
Apply media queries for it for the various widths.
#media (min-width: 1200px) {
.home-stage-v2 {
width: 1000px;
}
}
#media (max-width: 1199px) {
.home-stage-v2 {
width: 100%;
}
}
Example above. You will also have to rework the images as they're with fixed width and also don't respond to width changes. I'd suggest reworking them into either percentages or putting them into a grid.
http://getbootstrap.com/examples/grid/ for examples on grids.
I have a really bizarre issue that I just recently noticed
I'm working on a wordpress theme for a friend, and I'm using relative/absolute positions to add social/connect buttons on the side of some divs -- Which works fine to get the proper design.
The issue, however, arises on the "Social" div that is on the right side of the page.
If the browser is smaller than the main content's size, it adds extra white-space to the right side of page. If I move the div to the left side, it's fine; it only adds the whitespace at about half the page length (which is more confusing).
I can't for the life of me figure out why this is happening; I can't figure out if it's a standard behavior, or an issue I created on my own.
I was hoping perhaps someone here might have had similar experiences, or just an idea how to fix it.
The CSS for the #social div is:
#social{
width: 90px; height: 250px;
padding: 10px;
position: absolute; right: -40px; top: 40px;
background: #EFEFEF;
box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, 0.3);}
The CSS for the #page-content div it resides in is:
#page-content{
clear: both;
min-height: 500px;
width: 870px;
margin: 0 auto;
padding: 20px 0;
position: relative;
border: 5px solid #FFF;
background: #F2F0D7;}
And the screenshot is:
The width up there only exists if the browser's width is less than 960px (the width of the content)
After viewing your site, it looks like it's your social pannel. Some of the generated elements are 100px or more wide. If you remove the width:90px;, you can see the width it's trying to achieve. You could wither amend those elements and set their widths smaller (or to 100% or whatnot), or you could apply overflow: hidden; to the #social div:
#social {
...
overflow:hidden;
}
The reason why this is occurring is because you have overflow out of your social container. It only happens on the right because those elements are left aligned. (you could also align the elements to the right I suppose.)
Hopefully that helps.
As far as I have understood - You want your template to be responsive . For that you need to write media queries to cater various media sizes and resolutions .
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
write css styling for the different sizes and you can make you website look the way you want .