CODEWITHSUNDEEP
htmlcss
Casper123
Casper123

Reputation: 21

Change in website layout when reducing browser size

When I reduce the browser window size, the top and bottom footers start to shrink, pushing the content that is inside the footers (navigation bar on the top and the bottom) off the footer and it starts to overlap with the main text body. Does anyone know why this problem occurs? Apologies if this question is unclear or has been already answered, I'm still learning. Many thanks for your help.

Upvotes: 2

Views: 2420

Answers (2)

Mina Kolta
Mina Kolta

Reputation: 1551

I think you can customize all your CSS rules using the % ,So in case of the parent element's width is reduced by 400px for ex , you can set childs width,height,margine,etc by % values like this :

.parent{
  width:100%;
}
.child{
  width:60%;
}

Let's assume that the parent 100% represents 1024 px ,So Child will take 614 px and when the page is re-sized and takes 600 px ,So child will be 360 px automatically

Upvotes: 0

Mark Cameron
Mark Cameron

Reputation: 2369

Most content on a web page will be resized like that when the window is made smaller. What you can do is set the min-width CSS property to define a minimum width at which point the browser will add scroll bars rather than resize the elements on the page. SO something like:

.someClass {
  min-width: 800px:
}

Upvotes: 1

Related Questions