-2

I learn to build websites. Now I'm making page to practice and I have a problem. I haven't already made it responsive but I've seen that below 630px width page isn't 100% width anymore. On the right of the page appear white space and I don't know why is that and how to fix that.

Can you help me?

screen of my problem

Patryk
  • 29
  • 5

1 Answers1

0

This happens if any box (e.g. an <img>, a <span> or a <table>) is wider than width of browser window.

Images does not shrink and words does not break by default. Boxes can not be smaller than all cells in a row together.

Utilize different responsive techniques to avoid overstretching of viewport.

img {
  max-width: 100%;
} 

a, 
p, 
span {
  hyphens: auto;
}

/* wrap tables in <div class="horizontal-scroll-wrapper"> */
.horizontal-scroll-wrapper {
  overflow-x: scroll;
}

Browser's built-in inspectors helps to find types of not shrinkable elements.

Niklaus Hug
  • 39
  • 6