Photoshop Question posted in
The official user guide can be found here.

Resizing the window hides part of my div text – Photoshop

I have a simple page with a single div, centred with margin: auto, and some text inside the div.

I set padding on the div to 30px on all sides. The div is set to a max-width of 700px.

When I resize the Chrome browser window it’s behaving in an unexpected manner.

Page without resizing the window:

enter image description here

Page after resizing the window to two different sizes:

enter image description here

Note that the word “window” is cut off in the first size, due to the 30px padding, and the word “when” is cut off in the second size.

Here is what I want it to look like (I’ve photoshopped this to make it look right):

enter image description here

I want to keep the width set to 100% and the max-width property set to 700px so that it resizes for smartphones.

This can’t be hard to do, I imagine, but I just can’t seem to figure it out. I have tried googling it!

Here is the code:

<html>
<body style="background-color: blue;">

<div style="background-color: white; width: 100%; max-width: 700px; 
            margin-left: auto; margin-right:auto; padding:30px">

	<p>This is some text but the problem is that its doing something strange when I resize the width of the window, and it is very, very annoying.</p>

</div>

</body>
</html>
Tags:

2

Answers


  1. 0

    Use width: auto instead or you can just remove the width property. (You might want to remove the max-width property)

    <html>
<body style="background-color: blue;">

<div style="background-color: white; width: auto; max-width: 700px; 
            margin-left: auto; margin-right:auto; padding:30px">

	<p>This is some text but the problem is that its doing something strange when I resize the width of the window, and it is very, very annoying.</p>

</div>

</body>
</html>
    Login or Signup to reply.
  2. 0

    Since default box-sizing is content-box, it is adding padding value to the width resulting in increase of width on browser. Try to add below mentioned code.

    body{
 box-sizing:border-box
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search