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?
Related
Basically, I don't want the layout and formatting on my page to become nonsensical if the user resizes the browser to a really small size. After a certain limit, the page should not get any smaller as the user resizes the browser to a smaller size. The page should stay the same size and any overflow should be hidden or use scrollbars or whatever. I tried setting min-height on the body but this had no effect at all.
btw, I am already using media queries and they're nice but don't do what my boss wants.
The only think I could think of was to make some sort of element with a fixed size and that would prevent the page from getting smaller than that element.
This is where a media query and CSS will come in handy! (Assuming you already know how to use CSS)
The media query allows you to change the styling of an HTML page based on the size of the screen by using CSS (if you know any CSS).
Use it like so (but place this below all of your CSS code):
#media only screen and (max-width:480px){
//The elements you want to change here
}
As an example, any CSS code you place in this query will apply to your page if the screen width is less than 480 pixels. You could also use min-width, max-height, and min-height for this too.
Example scenario:
div {
width:600px;
height:400px;
}
#media only screen and (max-width:600px){
div {
width:100%;
height:50%;
}
}
In a case like this, if the user is in a browser window or phone with a width of less than 600 pixels, the div will take up half of the screen.
So, instead of trying to prevent things from getting smaller, make them bigger on smaller screens and windows.
There is a more in-depth article here.
To put it simply, when decreasing the size of your browser window, for mobile device view, the top buttons get pushed to the left, underneath the clients name and finally ends up in a Menu subfolder. Not being a web designer, although I am trying hard to learn, what I would like to see is the Menu subfolder react a lot sooner, before the button end up under the clients name. Being a free template of which I am trying to redesign, I looked under style.css and responsive.css but I'm not sure what I should be looking for. Any help with this matter would be very much appreciated.
http://landonmusicgroup.com/victoria_update_test/index.html
Thank you!
I would suggest smaller icons in general with less padding on the left and ride sides. This will create smaller icons that are closer together. You would likely have to scale the browser to ensure that the icons all fit before the media queries break to a single menu button at 767px.
The more efficient option would be to adjust the icons size and the logo size depending on the media query. For example, you have a media query in that template from around 980px to 1300px. If possible, in your template adjust the logo sizing and icon sizing to make sure that within that range, everything fits.
If you like the bigger icons, that is okay, you just must make sure that the bigger sized icons and logo do not take effect until after the window is over 1300px. Anything between 980px and 1300px is going to require smaller icons, smaller logotype, or a new arrangement altogether to avoid the line break.
Media queries are used like so:
//This section affects anything bigger than 480px
#media screen and (min-width: 480px) {
body {
//insert width and height
}
}
//This section affects anything bigger than 767px
#media screen and (min-width: 767px) {
li {
//insert width and height
}
}
//This section affects anything bigger than 980px
#media screen and (min-width: 980px) {
li {
//insert width and height
}
}
//This section affects anything bigger than 1300px
#media screen and (min-width: 1300px) {
li {
//insert width and height
}
}
The problem that I have is this:
www.dondolomemories.it
When resizing the window the image of the logo isn't resizing until the very last moment, resulting in a horrific two row menu overflowed.
I spent almost 2 hours trying tons of different settings. Can someone help me in figuring out what it's wrong. I simply want that resizing the window instead of overflowing the logo will resize to fit the menu on the right in the same line.
Giving your web page, by my inspection, would let the menu items not be showing on default by resizing to page inner width of 1024, I checked the ul.menu_top, discovered that in line 1991 in style.css,
#media only screen and (min-width:769px) and (max-width:1024px) {
....
}
Changing the 1024px value to larger like 1280px seems resolving the overflow-break line issue.
Try giving .logo a percentage width on smaller screens:
#media and screen (max-width:600px) {
.logo {
width:50%;
}
}
That should align correctly below width 600px, of course you can input and width you want and have multiple breakpoints to align it perfectly.
It's far simpler to point to an example than to try and explain the problem I am trying to solve so I'll do just that (apologies to people on mobile, this won't work...)
The effect I want to achieve can be seen on VICE news (http://news.vice.com)
As you can see while resizing the browser, the aspect ratio of the image remains intact throughout certain sizes. It jumps at 1200px and again at 700px, all the while scaling both the width and the height.
Is there a way to achieve this using only CSS? My head is stuck on this one.
Thanks!
Media queries, of course.
If you look in their source code, you will see that they have 3 different versions of the same image to display at each different size (to minimize scaling). Then, by using media queries, they will display the proper one and have its width fill the page:
Here's the mobile image, for example:
#media only screen and (min-width: 43.75em)
{
.lede .lede-images img.mobile
{
display: none;
}
}
And here's the global code:
.lede .lede-images img.mobile
{
width: 100%;
}
Setting the width to 100% while not setting the height will automatically maintain the aspect ratio while resizing.
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.