hello every body on daniweb
i build my site but it suffer on different screen resolution can't see whole site and div are going right div are going down so listen about make it fluide use body in css 100%
how i will do it only body width must be 100%
or every div or every things must get width 100% ????
all container and content..???
thank to answer me
chrisschristou 0 Posting Whiz
designershiv 1 Newbie Poster
Hi chrisschristou,
Use @media screens css for multiple window size
Ex: check smashing magazine website
If you want 100% layout, there is not need to add width it will take 100% by default.
Just code well css to make it align properly on different sizes of window.
Hope it helps
innocentgee 0 Newbie Poster
use bootstrap ... or read about responsiveness or you can also use percentages in declaring you divs
HoverportMedia 0 Posting Whiz in Training
I actually just posted something on another topic, that may be able to help you:
Your media queries will all depend based upon what you're trying to achieve. Below is a set of media queries, I've personally found to be quite helpful in some lights:
/* TABLET LAYOUT
----------------------------------------------- */
@media only screen and (min-width: 768px) and (max-width: 991px) {
}
/* GO TO ONE COLUMN LAYOUT
----------------------------------------------- */
@media screen and (max-width: 750px) {
}
/* MOBILE LAYOUT (PORTRAIT/320PX)
----------------------------------------------- */
@media only screen and (max-width: 767px) {
}
/* WIDE MOBILE LAYOUT (LANDSCAPE/480PX)
----------------------------------------------- */
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
I would also recommend investigating the app called Dimensions for Google Chrome. It's definitely the number one application I use when develop a responsive design.
profmuluka 0 Light Poster
the max-width property will do the trick
ObSys 56 Junior Poster
If your interested in different css styles for different screens, I would recommend the CSS Tricks website. This is also a great website for loads of different web design tricks.
Hope you find it useful
chrisschristou 0 Posting Whiz
i use this code but nothing change
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #F8F8F8;
color: #000;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin-top: 15;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.container {
width: 100%
max-width: 1600px;
background-color: #FFFFFF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.sidebar1 {
float: left;
width:100%;
max-width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
float: left;
width:100%;
max-width: 840px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.sidebar2 {
float: left;
width:100%;
max-width: 180px;
background-color: #EADCAE;
padding: 10px 0;
}
LastMitch
i use this code but nothing change
@chrisschristou
You have to put that code in the media query that HoverportMedia provided, after that you have to play around with on the mobile/tablet to make it presentable.
Does that make sense?
chrisschristou 0 Posting Whiz
this is my code i use @media but still same:
@charset "utf-8";
@media only screen and (max-width:1366px) {
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #F8F8F8;
color: #000;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin-top: 15;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.container {
width: 100%
max-width: 1600px;
background-color: #FFFFFF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.sidebar1 {
float: left;
width:100%;
max-width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
float: left;
width:100%;
max-width: 840px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.sidebar2 {
float: left;
width:100%;
max-width: 180px;
background-color: #EADCAE;
padding: 10px 0;
}
}
@media only screen and (max-width:800px) {
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #F8F8F8;
color: #000;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin-top: 15;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.container {
width: 100%
max-width: 800px;
background-color: #FFFFFF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.sidebar1 {
float: left;
width:100%;
max-width: 90px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
float: left;
width:100%;
max-width: 420px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.sidebar2 {
float: left;
width:100%;
max-width: 90px;
background-color: #EADCAE;
padding: 10px 0;
}
}
LastMitch
this is my code i use @media but still same:
@chrisschristou
Did you test it this out, if you didn't test it out of course it will be the same.
chrisschristou 0 Posting Whiz
i tested on my tablet and on browsers's extension for developer
plus i add thi in head
<meta name="viewport" content="width=device-width" />
LastMitch
i tested on my tablet and on browsers's extension for developer plus i add thi in head
I feel you are not grasping this CSS.
No matter how much I explain and show the code you don't understand the basic still.
You need to understand how to create a basic website, you are jumping from learn media query without understand how each function works
chrisschristou 0 Posting Whiz
@media only screen declare the size of screen right ???
i'm not prefessional web-designer couln't be here if i was
thnak to take to help me
<M/> 170 Why so serious? Featured Poster
i'm not prefessional web-designer couln't be here if i was
He wasn't giving you professional advice nor was he giving you anything very hard. He was giving you elementary but helpful advice that most beginners should understand.
@media only screen declare the size of screen right ???
Here, this should help you understand @medias a little better: http://www.w3schools.com/css/css_mediatypes.asp
chrisschristou 0 Posting Whiz
thankfull for all my friend i think i have undestund but still i dont see where is my mistake i need help
<M/> 170 Why so serious? Featured Poster
thankfull for all my friend i think i have undestund but still i dont see where is my mistake i need help
Okay... lets start from scratch.
What are you trying to achieve and what have you tested so far.
chrisschristou 0 Posting Whiz
my screen is 1366x768 and it show fine when i try on biggest resolution the my website is very small on desktop, i try on my 7 inch ablet pc only half of web site is visible on screen and sidebar on footer it look very sad
<M/> 170 Why so serious? Featured Poster
hmmmm sounds like a browser/mobile compatibility problem...
Read these:
http://www.noupe.com/how-tos/tutorials-for-making-your-website-mobile-friendly.html
chrisschristou 0 Posting Whiz
the link are intersting i must read more so you think my css don't have any mistake ??? on browser extension is same proble with diferent virtual device i don't think it is device screen problem
<M/> 170 Why so serious? Featured Poster
do you have a sample of your current code?
chrisschristou 0 Posting Whiz
here is my css code
@charset "utf-8";
@media only screen and (max-width:1366px) {
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #F8F8F8;
color: #000;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin-top: 15;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.container {
width: 100%
max-width: 1600px;
background-color: #FFFFFF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.sidebar1 {
float: left;
width:100%;
max-width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
float: left;
width:100%;
max-width: 840px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.sidebar2 {
float: left;
width:100%;
max-width: 180px;
background-color: #EADCAE;
padding: 10px 0;
}
}
@media only screen and (max-width:800px) {
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #F8F8F8;
color: #000;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin-top: 15;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.container {
width: 100%
max-width: 800px;
background-color: #FFFFFF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.sidebar1 {
float: left;
width:100%;
max-width: 90px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
float: left;
width:100%;
max-width: 420px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.sidebar2 {
float: left;
width:100%;
max-width: 90px;
background-color: #EADCAE;
padding: 10px 0;
}
}
<M/> 170 Why so serious? Featured Poster
Why do you have duplicates of the same styles also, through out your css, you forgot to close each style. Also, you should "px" after each 0 you put, unless you want to use percents (which most people use for responsive designs).
Here is what i came up with (i didn't use any editor other than the one on daniweb, so there maybe a mistake or two)
@charset "utf-8";
/* CSS Document */
@charset "utf-8";
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background-color: #F8F8F8;
color: #000;
margin-right: 0px auto;
margin-bottom: 0px auto;
margin-left: 0px auto;
margin-top: 15;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
.container {
width: 100%;
max-width: 1600px;
background-color: #FFFFFF;
margin-right: auto;
margin-bottom: 0px auto;
margin-left: 0px auto;
}
.sidebar1 {
float: left;
width:100%;
max-width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
float: left;
width:100%;
max-width: 840px;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
.sidebar2 {
float: left;
width:100%;
max-width: 180px;
background-color: #EADCAE;
padding: 10px;
}
johmny -3 Junior Poster in Training
you can use cms for the responsive design
chrisschristou 0 Posting Whiz
thank you dear to reply me i copied to code for diferent screen i use @media only screen and (max-width: px)
and here the css code
the code you give me up if i use it is same problem
please check here and try undestund my problem www.zunaphone.com
i don't know i my website security is strong but i give it
<M/> 170 Why so serious? Featured Poster
you can use cms for the responsive design
@johmny, that isn't helpful...
please check here and try undestund my problem www.zunaphone.com
I will look at your site and try to make some tweaks to the code, in the mean time, you can keep tweaking your code or wait for another person to assist.
chrisschristou 0 Posting Whiz
i have made more research and i workd this code but still i have problem with responsive please check my site www.zunaphone.com and code the css is here
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #fff;
color: #000;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin-top: 15;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.container {
width: 100%;
max-width: 312px;
background-color: #FFFFFF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.sidebar1 {
float: left;
width:100%;
max-width: 40px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
float: left;
width:100%;
max-width: 272px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.sidebar2 {
float: left;
width:100%;
max-width: 0px;
background-color: #EADCAE;
padding: 10px 0;
}
img {
width: 100%;
height: auto;
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #fff;
color: #000;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin-top: 15;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.container {
width: 100%;
max-width: 313px;
background-color: #FFFFFF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.sidebar1 {
float: left;
width:100%;
max-width: 40px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
float: left;
width:100%;
max-width: 273px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.sidebar2 {
float: left;
width:100%;
max-width: 0px;
background-color: #EADCAE;
padding: 10px 0;
}
img {
width: 100%;
height: auto;
}
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #fff;
color: #000;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin-top: 15;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.container {
width: 100%;
max-width: 312px;
background-color: #FFFFFF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.sidebar1 {
float: left;
width:100%;
max-width: 40px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
float: left;
width:100%;
max-width: 272px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.sidebar2 {
float: left;
width:100%;
max-width: 0px;
background-color: #EADCAE;
padding: 10px 0;
}
img {
width: 100%;
height: auto;
}
}
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000;
color: #000;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin-top: 15;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.container {
width: 100%;
max-width: 760px;
background-color: #FFFFFF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.sidebar1 {
float: left;
width:100%;
max-width: 85px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
float: left;
width:100%;
max-width: 675px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.sidebar2 {
float: left;
width:100%;
max-width: 70px;
background-color: #EADCAE;
padding: 10px 0;
}
img {
width: 100%;
height: auto;
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #F8F8F8;
color: #000;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin-top: 15;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.container {
width: 100%;
max-width: 760px;
background-color: #FFFFFF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.sidebar1 {
float: left;
width:100%;
max-width: 85px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
float: left;
width:100%;
max-width: 675px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.sidebar2 {
float: left;
width:100%;
max-width: 70px;
background-color: #EADCAE;
padding: 10px 0;
}
img {
width: 100%;
height: auto;
}
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #F8F8F8;
width: 100%;
color: #000;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin-top: 15;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.container {
width: 100%;
max-width: 760px;
background-color: #FFFFFF;
margin-bottom: 0;
padding-left: 10px;
padding-right: 10px;
}
.sidebar1 {
float: left;
width:100%;
max-width: 85px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
float: left;
width:100%;
max-width: 675px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.sidebar2 {
float: left;
width:100%;
max-width: 85px;
background-color: #EADCAE;
padding: 10px 0;
}
img {
width: 100%;
height: auto;
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #F8F8F8;
width: 100%;
color: #000;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin-top: 15;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.container {
width: 100%;
max-width: 1550px;
background-color: #FFFFFF;
margin-bottom: 0;
padding-left: 10px;
padding-right: 10px;
}
.sidebar1 {
float: left;
width:100%;
max-width: 180px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
float: left;
width:100%;
max-width: 968px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.sidebar2 {
float: left;
width:100%;
max-width: 180px;
background-color: #EADCAE;
padding: 10px 0;
}
img {
width: 100%;
height: auto;
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #000;
color: #000;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin-top: 15;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.container {
width: 100%;
max-width: 1644px;
background-color: #FFFFFF;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.sidebar1 {
float: left;
width:100%;
max-width: 240px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
float: left;
width:100%;
max-width: 1404px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.sidebar2 {
float: left;
width:100%;
max-width: 0px;
background-color: #EADCAE;
padding: 10px 0;
}
img {
width: 100%;
height: auto;
}
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #F8F8F8;
color: #000;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
margin-top: 15;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
}
.container {
width: 100%;
max-width: 280px;
background-color: #8080;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
.sidebar1 {
float: left;
width:100%;
max-width: 60px;
background-color: #EADCAE;
padding-bottom: 10px;
}
.content {
float: left;
width:100%;
max-width: 220px;
padding-top: 10px;
padding-right: 0;
padding-bottom: 10px;
padding-left: 0;
}
.sidebar2 {
float: left;
width:100%;
max-width: 60px;
background-color: #EADCAE;
padding: 10px 0;
}
img {
width: 100%;
height: auto;
}
Alfred_2 -3 Newbie Poster
Hello, Your question is very nice but unless you want to do all size measurements in percentages, I don't think you will be able to do and you'll have a problem if someone uses a resolution in a different aspect ratio because in the first case your page will be stretched or squished and in the second you could have layout issues.
profmuluka 0 Light Poster
trying using em or % when defining your dimensions (width & height). fluid design.
chrisschristou 0 Posting Whiz
more help please when i go to a large screen my site is realy loose all content is down of side bar it look very sad
profmuluka 0 Light Poster
please visit w3schools and read some more css
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.