I use media query and i want content on my web page be responsive.
is this code ok?
#media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3){
.navmob{margin-top:0px; margin-left:-100px; margin-right:100px !important; }
.sidebar { display: none; }
#navmenu {margin-top:10px; margin-left:auto; margin-right:100px; }
.content {width:auto; height:auto; margin-left:100px; margin-top:-50px;}
.contentsing{ width:500px; height:auto; margin-left:auto; margin-right:auto; margin-top:-50px !important;}
body{
background-image:none !important;
background-color:#000000 !important;
font-size:12px !important;
}
}
and why content is not responsive... Here is example
Here is code of my index
There is allot of bugs i found in console. Any way i cannot solve all of them but i can tell you, you need to work on width when you make a template responsive. These are some css line from i try to manage your template, Hop that help you
Put them as it is
#media(max-width:714px){
.posts .post-item{width:96%}
.text5{width:100%}
#navmenu ul{width:90%}
}
If you are testing your responsiveness by resizing your browser, device-width will not take effect. This is because the width of your computer screen does not change.
Use max-width/min-width. It targets the rendering area on the screen, therefore, when you resize, the CSS will take effect.
device-width targets the screens resolution.
max-width/min-wdith targets the screens rendering area.
This is the wrong way to go about a responsive website. You need a series of media queries to cater for:
desktop 1024px
ipad 768px
iphone 320px
Once you have these breakpoints set up the site will respond as expected, all content needs to be set to % in terms of width so it can adjust accordingly. Also do not use px use em for font sizes as this will auto re adjust for you.
Look into using a front end framework such as bootstrap as this does a lot of the hard work for you by using a 12 column grid layout system.
Related
I am picking up an existing free template Jessicawhite at html5xcss3.com
I notice the images stretch 100% in any screen and in large screen (MAC wide screen for e.g.), it looks really ugly especially the home page slider.
I want to center the whole page/body if the screen is larger than the max size of my images (1280px, sized in the server) like in this site: igihe.com I tried playing with bootstrap-responsive.css. The highest screen it deals with is 1200px min.
#media (min-width: 1200px) {
}
My attempt was for screens with minimum 1400px:
#media (max-width: 1200px) {
//leave original intact
}
#media (min-width: 1400px) {
body {width:1366px; margin:0 auto;}
/* OR */
.body_container {width:1366px; margin:0 auto;}
}
As well, I just tried changing the min-width:1200px to min-width:1400px but it doesn't behave well either.
My issues are: it doesn't correctly react. My screen size is 1366px, which is less than 1400px yet it applies the body styles.
Need i add all the specs under each media to each screen size after words? Meaning, the min-width:1200px contains a bunch of specs. Does that mean each screen size has to define it?
Any shorter solution that puts the menu in consideration?
You can just use the simple css3.
use a wrapper division o wrap all your elements and this wrapper have a display:none; by default for all width of media.
.wrapper{
display:none;
width:your-width-num px;
margin-right:auto;
margin-left:auto;
}
And for the wider screens:
#meida(min-width:your-width-num) {
.wrapper{
display:block;
}
}
I have a header in my web page with white background color. it works properly in PC monitors. but in mobile phones, the result is something like this:
http://uupload.ir/files/j0ki_screen_shot_2015-10-10_at_19.44.32.png
when I scroll the page to left, half of my header doesn't exist.
http://uupload.ir/files/o0j3_screen_shot_2015-10-10_at_19.50.36.png
my code is here:
<style type="text/css">
.my-header-box{
width:100%;
background-color:#fff;
border-bottom:1px solid #4ba028;
}
.my-header-wrapper{
width:100%;min-width:940px;max-width:1280px;
height:200px;
/*border:1px solid #ff0000;*/
margin:0 auto;
}
.my-logo img{
max-width:300px;
max-height:90px;
}
</style>
<div class="my-header-box">
<div class="my-header-wrapper">
</div>
</div>
You've fixed a width - min-width for .my-header-wrapper, which is why you are seeing it that way on smaller devices.
.my-header-wrapper{
width:100%;
max-width:1280px;
height:200px;
margin:0 auto;
}
Otherwise, use media query for devices with 939px or less pixels devices.
#media only screen and (max-device-width: 936px){
.my-header-wrapper{
min-width: 100%;
}
}
In your css min-width:940px is the main reason it`s happening.
If you want to make the website more responsive when viewing it in mobile devices try using css media queries
See a simple tutorial here
W3Schools tutorial
And if you really want deep understanding then this will be major help:
CSS-tricks - Media Queries
CSS tricks is going to be real helpful for learning anything around CSS
I am trying to create a fluid layout that adapts to different screen sizes...
It works on the desktop with no issues, but on a tablet or a cellphone the body overflows and creates a horizontal scroll bar.
Click here you can see the problem
I already have checked all the elements and their padings and margins, and that doesn't seam to be the issue.
Used to this css for desktop scroll remove
footer.css line no 55
.infolinksbottom{
margin-left:5%; // remove this line
margin-left:0; //add this line
padding-left:5%; // add this line
box-sizing: border-box; // add this line
}
Problem is with the way css propertiese set for the class **.bottomlong**. You will need to manage min-width more precisely. Currently min-width is set to 120px so that's one of the prime reason that its giving Horizontal Scrollbar. Either you get less than 120px min-width or put float:left; for .bottomlong.
I observed you are not using BREAKPOINTS. The best practice would be to use breakpoints to achieve your result over different devices.
Here are few of the most commonly used break-points
#media screen and (max-width:959px){
/*your css classes*/
}
#media screen and (max-width:640px){
/*your css classes*/
}
#media screen and (max-width:320px){
/*your css classes*/
}
You may like refer GOOGLE DOCS FOR BREAKPOINTS for more detailed information.
So I am facing problem with where I have 2 different mediaqueries where the width is same for each but the height is different like this:
#media only screen and (max-width:1920px) and (min-height:1080px){
#home{
height:1080px;
}
}
#media only screen and (max-width:1920px) and (min-height:1200px){
#home{
height:1200px;
}
}
But what happens is that when I change the screen dimensions to 1920px width with 1200px height it seems that this media query is not overriding the other one with a height of 1080px. For now I am stuck here and cant figure out the mistake I made. Whats the issue here ? Where am I going wrong ? what is the solution to this problem ? Thanks for your help !
The world 'screen' in the media queries is a little bit confusing. The actual meaning of it is not the computer screen resolution but the actual internal size of the browser window. Even when the window is maximized, to compute the actual height you should discount from the screen height the browser window caption address bar, system tray, etc., so if the screen resolution is 1200px then media query screen size will be something about 1180px.
The following code sample illustrates the concept. See it in full screen mode, try to resize the browser window and see how the color changes:
body{
background-color: yellow;
}
#media only screen and (max-width:1920px) and (min-height:500px){
body{
background-color: lime;
}
}
#media only screen and (max-width:1920px) and (min-height:800px){
body{
background-color: red;
}
}
One of the major problems I have when designing websites are the variety of screen resolutions. First, I design on my 1366 x 768 computer and it looks perfect! Then on a 27" Mac it has so much space that the height could use in the content. It's like as the screen resolution is smaller, you have to worry about the width, and as it gets larger, the height. So, my question is what is the underlying factor to solving screen resolutions and space? I've heard percentages, separate media style sheets, and responsive will do the deal, but are those really a problem solver? Does it cause any other design conflicts?
I think the changes need to be made in the following places although I'm not sure:
section > div{
font-weight:bold;
font-size:30px;
color:#000000;
display:inline; /*fixed size based only what is in the element*/
width:30%; /*restrict the width size, default with inline property is 100%*/
/*max-height:85%;*/ /*restrict height size*/
padding:5px; /*a little pad from the edges are good*/
margin-top:10px; /*align the same as the other elements*/
margin-bottom:100px;
margin-left:100px;
margin-right:100px;
}
#message{ /*move element freely inside section; placed where desired*/
position: absolute;
top:120px;
left:-75px;
right:100px;
min-height:310px; /*same height across all content pages*/
min-width:550px; /*same width across all content pages*/
font-size:20px;
}
Just in case, my full css code in jsfiddle: JS Fiddle
I want to reach most target audiences with my website and right now, it's only good for 1024 x 768 and some tablets but definitely not mobile devices or large computer screens.
My website: Website Project on SmartPhone Photography
You see how the content aligns with the background image. The camera is to the right and the content to the left, not touching or closing in on the camera part of the background as does on mobile devices. Another thing, is on large computer screens, there's too much space on the top and bottom of the content, it's like as if it's in the middle with fixed height. As the screen's height grows larger I want the content to have a lesser vertical scroll button and fill the space needed as it looks on a 1024 x 768.
I would really appreciate an answer to this problem and something to be used for future reference on how to solve screen resolutions across all media. This website is fantastic for testing multiple screen resolutions. ViewLike.US
Sounds like you should go responsive. Then you can adjust for your viewport. Use a media query or if use an option like Bootstrap . Here's a media query example:
/***************
TABLET */
#media (min-width: 768px) {
body{
/*Put all your secific styles here*/
}
}
/***************
DESKTOP NORMAL*/
#media (min-width: 992px) {
body{
/*Put all your secific styles here*/
}
Unfortunately it is not as easy as writing one line and fixes all independently.
NOTE: If responive, use em's for Fonts, % for widths. Doesn't mean you shouldn't use pixels, remember the query is specific so for 992px Desktop, you could put width:20px; or whatever.
Hope this helps.