CODEWITHSUNDEEP
htmlcss
user1944657
user1944657

Reputation: 23

Site is not resizing to window size. Site cut off at 800px

Im currently have a problem with small screen displaying my site, the site is adapting to 100% height of the browser, but the content inside it is not accomodating to the height. It is causing the content to be cut off. Currently, displaying at 19" screen is okay, lower will have a problem. While mobile is perfectly displaying.

the site is http://emailblasting.epizy.com/index2.html

i have adjusted my container div to 100% height, but it still cut off. or is the content inside it i need to set width and such?

Upvotes: 0

Views: 334

Answers (2)

sBlaise
sBlaise

Reputation: 11

As I can see you are using media queries (@media rules), avoid setting your widths and heights for outer containers in pixels and go for responsive values. For example;

html, body, .container {
    width: auto;
    max-width: 100%;
    height: 100%;
}

img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

You can then control the layout of individual inner containers with margins or padding (or as a last result pixel widths) where necessary.

That way you'll have your page and content being responsive and fit in the different browser windows.

Upvotes: 1

Chittaranjan Das
Chittaranjan Das

Reputation: 194

Heyy...I guess it is because your container has margin-left and margin-right

    .container {
    display: block;
    max-width: 600px;
    width: 100%;
    height: 100%;
    max-height: 800px;
    margin: 0 auto;
    overflow: hidden;
}

here margin: 0 auto.. that "auto" part is creating issue for you.. Try to check that and i guess it will work for you..

and you can set your height to 100vh instade of 100%... It wont make your page scrollable

Regards

Upvotes: 0

Related Questions