I am trying to optimize my website for smaller screens like handys.
But when I try to test it for screens smaller then 400px the body isn't the full width of the screen anymore.
this is how it looks for a 360px widescreen.
It says the HTML width is 360px, but it isn't the full width of the screen.
Related
i am trying to keep the original default width for mj-body on mobile view as well, because i calculate my image's width based on screen width and its width in percentage value so i need the screen width to be persistent, now here's the code that i use https://mjml.io/try-it-live/s743_l6g7
now as i see problem lies in here
mjml automatically adds fits columns to the screen which messes up my desired result on mobile, i want to override this and always have 600px screen width even on devices smaller than 480px screen size and have zoomed out view as it would have been normally
I am designing my first webpage. I have completed almost all the work but now the problem lies in screen resolution. I start designing on 1920x1080p of screen resolution but when i check it on 1080x768p screen the content was missing and overlapped. Now i set the screen size of my Laptop to 1080x768 and set the webpage but while I turned it back to 1920x1080 on the right side content was missing mean only in the 1080x768p screen while i have used following code.
body {width:100%; hight:100%;}
It just fills the background images to full screen while content does not displays on full screen what to do any help?
you need to add to html and the body
html,body{
height:100%;
}
/**reset padding of body**/
body{padding:0;}
(the width of 100% is auto)
LIVE EXAMPLE
I am not able to figure out why this is happening, I am working on a fluid layout which is fluid till 1366px screen size and after that it is fixed, except header.
Now if I change my screen size anywhere between 1200px to 1366px then it does not make any change in html elements and instead a horizontal scroll bar appears. If I go beyond 1200px to anywhere till 300px or something it scales very well. But I don't know why is it having issue between 1200 to 1366px screen size.
ISSUE: I don't want horizontal scroll bar to come between 1200px to 1366px and make content scale accordingly, as it scales for other screen size.
And this issue is not on a single page, it is on complete website. You can see this issue happening on this website Winni.in
Any idea, where I am going wrong?
The issue appears because you have this declaration in your CSS
#media (min-width: 1200px)
.container {
width: 1330px;
}
}
Which means that starting from screen width 1200, the div will be 1330px. Just change it to 1200px or 100%, depending what result you want to achieve.
I have a page is fully responsive for most of resolution including width: 480px. Every elements are perfectly set as they should be. But when I zoom to maximum by using ctrl+ plus sign, it zooms to the layout 480px as I can see by firebug, but it does not fit in screen as it was fitted in 480px screen without zoom.
Here's my media query for 480px screen.
#media only screen and (max-width: 480px) {
.inner-main{width:480px;}
.listing ul li{width:460px;}
.latest-post-lising-leftside{width:71%;}
.holder-lattest-gallary{left:25%;}
.jcarousel li{width:225px;}
.posts-tab p{width:79%;}
.footer-inner1, .footer-outer{width:480px;}
.footer-left{width:460px;}
.footer-left-down-content{width:240px;}
.footer-right{width:435px;}
.jcarousel-control-prev, .jcarousel-control-next{top:131px;}
.logo { margin-left:0px;}
.drop-menu{width:470px;}
.drop-down-posts{width:139px;}
}
You can see my page here.
http://maitriwebsolution.com/Projects/zayan/html/
I tried giving every elements and div fixed width of 480px,but still doesn't fit in maximum zooming. Class .inner-main is the effective class for width of whole page, and it has width:480px while zooming to max.
Here you can see what I am trying to achieve on this template.Try zooming to maximum by ctrl+ plus sign in this site.You can see how every element set to fixed width.
http://pixelgrade.com/demos/bucket/
Can anyone suggest any solution?
I'm building a Wordpress theme and everything is peachy but I have problem with the layout on IE8 on a screen resolution smaller than 1200px
Basically my layout has 1200px grid width but I figured that there will be a problem with 1024px screen resolution (20% of the population bla bla) so I created media queries when the screen size is smaller than 1199px the grid to change its width to 960px and so on for tablets, phones etc.... and problem solved! EXCEPT!!! for IE8 which does not support media queries and the theme does not resize properly on IE 8 with screen resolution of 1024x768px and ofcourse lower....
So my question is how can I make the design change the grid width to 960px ONLY on IE 8 and lower and screen size bellow 1200px?