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

Recommended Answers

All 29 Replies

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

use bootstrap ... or read about responsiveness or you can also use percentages in declaring you divs

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.

the max-width property will do the trick

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

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;
}
Member Avatar for 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?

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;
}
}
Member Avatar for 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.

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" />
Member Avatar for 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

@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

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

thankfull for all my friend i think i have undestund but still i dont see where is my mistake i need help

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.

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

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

do you have a sample of your current code?

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;
}
}

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;
}

you can use cms for the responsive design

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

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.

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;
}

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.

trying using em or % when defining your dimensions (width & height). fluid design.

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

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.