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;
}
}
Related
I'm not sure if I will be able to explain it clearly and if this is possible. I only have a basic grasp of HTML/CSS. I'm looking for a way to have a floating element not float when viewed from a smaller screen (mobile device). I have an image floating on the left side of a paragraph, but when viewed from mobile, the image with the text side-by-side gets too crowded. Is there a way to make it float on the left side normally, but appear on top of the text when viewed in smaller screens? Thanks!
What you need is to define Media Queries. Media queries are like css triggers that defines in which resolutions certain rules will be applied.
.div img {
float: left;
}
/*This will cause the img receive float none rule when screen is smaller than 768px*/
#media only screen and (max-width: 768px) {
.div img {
float: none;
}
}
There is a complete guide you can check out right here.
Using media queries should be what you need.
For example.
#media only screen and (max-width: 768px) {
.content {
float: none;
}
}
Basically that says if the screen size is less then 768px then the class content won't have any float.
What you are looking for is called MediaQueries:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You will need something like:
#media screen and (max-width: 400px){
yourelementselector {
... your CSS...
}
}
I've made a website that stretch a container to the bottom. In that container, there are divs that fit perfectly the screen at low resolution such as 1366x768 ...etc
But when the resolution is higher (1440x900...etc) There is a blank space left under the divs (link to view website at different resolutions)
So is there a possibility to fill that space with divs only in high resolution ? I've tried overflow-y:hidden,but since the container's height must be in auto it doesn't affect it.
Use media queries that target resolution like
#media screen and (min-resolution: 300dpi) {
#myDiv{
display:block;
}
}
Alternatviely, you can target dimension such as width like
#media screen and (min-width: 1000px) {
#myDiv{
display:block;
}
}
My goal is to stop from changing the layout at a given resolution, say 768px wide.
Is there a way to set that across the board in my app?
You can give your container a min-width of whatever amount you want.
#media all and (min-width: 768px){
body {
min-width: 960px;
}
}
I give my div elements sizes in % because I want them to be able to adapt to different screen sizes of different devices. I however want the size to be constant for a device. For example if a div is 60% in width of my laptop browser screen it should stay 60% even when I minimize size of my browser window.
How do I achieve this?
You are probally looking for
min-width: 800px;
If the width gets under 800px now the div wont resize smaller and just stay at this width.
Just make sure you add a media query like this:
div{
width: 60%;
}
#media (min-width: 601px) {
div{
min-width: 800px;
}
}
#media (max-width: 600px) {
div{
min-width: 400px;
}
}
Using % you can make the div adaptive, but inside side the div if there any image or fixed width elements it will not be adaptive, you need to make them adaptive using media queries
ex:
/* Small Mobile Devices ( < 768px ) Style Begin */
#media (min-width: 0px) and (max-width: 767px) {
.div-elements-name {
width:100%;
}
}
I got a problem on a website http://madamrimma.by/, when browser scale is less then 100%, the website is displaying incorrect: http://joxi.ru/qlrGUhjKTJBMAUGBReA. This website is not created by me and i don't understand how it happened.
This is because downscaling the browser actually increases the width of the page in pixels. While the browser may occupy say, 1024px, when the page is downscaled, the number of pixels as represented in the DOM is actually more than 1024px.
Additionally, there are media queries that control the appearance of the page. If you look at #wrappen, the following CSS exists:
#media (max-width: 1920px) and (min-width: 1025px)
#wrappen {
width: 1170px;
margin: 0 auto;
box-shadow: 0 0 20px #f25aeb;
background: #fff;
}
When you downscale your browser, the number of pixels as represented in the DOM is more than 1920px. Hence, the fixed-width layout imposed by #wrappen is ignored, and the layout breaks.
If you have an extremely high-resolution monitor, you can also resize your browser window beyond 1920 pixels and have the same effect.
The Fix
The fix for this is easy. Simply remove the offending max-width media query. Of course, this is not optimal for high resolution screens, as most space is wasted, but at least the layout does not break.
The main problem is having fixed widths to the div elements in the code. Change them to %'s so that it will be fixed. Every element should be center aligned.
I use this media quires:
/* Mobile styles go first, without media
queries. */
#media only screen and (min-width: 321px) {
/* Larger mobile styles (wider than 320
pixels) */
}
#media only screen and (min-width: 600px) {
/* Tablet styles (wider than 600 pixels)
*/
}
#media only screen and (min-width: 1024px) {
/* Large laptop styles (wider than 1024
pixels) */
}
#media only screen and (min-width: 1140px) {
/* Desktop styles (wider than 1140
pixels) */
}
for each resolutions and it works.