In my CSS
body{
overflow-y:scroll;
min-width: 1024px;
}
What have I expected? That if screen size is less than 1024px, then there will be gorizontal scrollbar, and elements won't cover each other (1024px - minimal width, with which my site looks pretty as expected).
But when I test it with some resolution testers, it actually turns out that it doesn't change anything.
Why?
You're setting the min-width of the body. That means that the width can't be smaller than your min-width.
You probably want to use media querys.
Like for example:
CSS
#media only screen and (min-width: 1024px) {
body{
overflow-x:scroll; /* horizontal */
/* overflow-y:scroll; */ /* vertical */
}
}
This tells us if the window width is smaller then 1024px, then add an overflow-y:scroll to the body.
For horizontal scroll you shoud use overflow-x:scroll; and not overflow-y.
it adds vertical scroll to the content. here is example if it will help you http://jsfiddle.net/sMtmD/
Related
Let's say I have a div on a webpage that displays on a desktop at 1000px width. Let's say I want that div to display at 100% width in portrait mode on all phones. What would be the easiest way to accomplish this without using Bootstrap?
.yourdiv {
width: 100%;
max-width: 1000px;
}
This rule would work pretty well in situations like these: It makes the DIV 1000px wide if the screen is wider than 1000px, and makes it 100% wide on all screens which are less than 1000px wide.
Johannes answer is really awesome but if you need to have more control over what's displayed, you can always use media queries.
Example: hiding a sidebar only when the screen width is <= 600px:
#media (max-width: 600px) {
.sidebar {
display: none;
}
}
You can find out more here:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
I am having problem in making a screen center for small screens
I've created 1500px wide long page designed in photoshop and sliced into tables.
i used the following code to center my page
width:1500px;
margin: 0 auto ;
position:relative;
to make it center , its good on big screens but in small screens a horizontal scrolls appears and its all to left i want to in middle as a default and i can remove it using overflow x hidden.
Problem with your code is, you used tag and gave width of 1500(not dynamic) also i got containers(#index-07_,#container12) with style of
width : 1500px
instead of using
max-width:1500px
change them also add style(obviously not good choice; you may choose specific image tag but for quick fix it will work for you)
img{width:100%}
i hope it may worked for you
Your applying a static width to page, so if your viewing in small screen, page gets overflow, so in this case you have to adjust the page width with respect to screen resolution. It can be done by using media query, refer the below link about media query - http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
use your CSS code with different static width in different resolution like
#media (max-width: 600px) {
.smallerscreen{
width:1500px;
margin: 0 auto ;
position:relative;
}
}
#media (max-width: 300px) {
.smallerscreen{
width:500px;
margin: 0 auto ;
position:relative;
}
}
After reviewing your code, you have go with max-width instead of width in container class as said by Neel.
.container12 { max-width: 1500px;}
Also set image width as 100% as like in below code.
div[id^="index-"] > img[id^="index_"] {
width: 100%;
}
Is there a way to make an element scroll with the background without giving it a fixed position? So it won't cause problems when resizing the window?
the element I am talking about is referred to in the css as follows.
#logo {
margin: 20px auto;
width:355.2px;
height:148.8px;
This cannot be accomplished without using position fixed, in order to fix your problem with the resize you'll need to use screen query for it. Here's an example of how to use it on your style.css file and a list of default screen sizes
=== UPDATED FOR YOUR NEEDS ===
In order to align your logo on the middle of the screen and not display it on smaller screens as you requested on the comments you'll need to use a position absolute for your #logo, to make it fixed while you scroll the page, wrap it inside of a fixed div. Here's the trick
/* Your normal css goes here */
.logoContainer{
position:fixed;
}
#logo {
left:50%; /* this puts your logo on the middle of the screen */
width:38px;
margin-left:-19px; /* this needs to be half of the width */
position:absolute;
}
/* Smartphones (portrait) ----------- */
#media only screen and (max-width : 320px) {
/* Your fix for smaller screen sizes example*/
#logo {
display:none; /* this tells your div to not display */
}
}
Here's an online example
I've got an image that has 90% width, but with a max width of 640px. I want to set a specific style when the max width is reached. So, I was thinking about a style that is applied depending on the width. Here there's a similar question:
CSS targeting specific images
But I don't have a width attribute. How can I achieve this (without using js, if possible)?
To further user3127242, you can use media queries to add landmarks where the image should change. In order to effectively change the image source, you should also consider using a div with background-image set. Example:
HTML:
<div id="fancy"></div>
CSS:
#fancy {
background: transparent url(...) 0 0 no-repeat;
width: 400px
}
#media only screen and (min-width:400px) {
background-image: url(image1.jpg);
}
#media only screen and (min-width: 500px) {
background-image: url(image2.jpg);
}
Example fiddle here: http://jsfiddle.net/27UjQ/2/
The only way without js of which I can think is using mediaQueries. Doing the math I calculated the size of your image will be 640px, when the screen's resolution is 1064. Therefore you will need to add this mediaQueries code to your css, which changes the img's style when this resolution is reached
#media only screen and (min-width:768px) {
/* Your changes to the image's style */
}
Here's a link. Try resizing the window to see the changes when the certain width is reached.
It would be great if you could provide us with a working example or your code.
But try the following:
img {
width: 90%;
max-width: 400px; /* just an example */
}
I have a website where when the screen goes above 1400px; the website no longer expands. However, I also have a floating element. the navbar is floated to the left and scales down in size with the page. However, I don't wamt it to style if the screen size gets larger.
If someone views my page above 1400px screen resolution it works and does not move. However, if someone views the website and zooms out increasing the viewport size not the screen size it stays stuck to the left hand side and distorts.
I want a div to display:none if the screen size or the viewport size reaches a maximum size of 1400px;
I need compatibility for modern browsers and mobile devices.
you can try this...
#media screen and (max-width: 1400px){
div {
display:none;
}
}
#media (min-width: 1400px) {
body {
background:red !important;
}
}
works for me :)
EDIT: sorry missed the part about zooming the page. i'm not sure viewport is supposed to work like that?