box in a box

[Hosun]

Hi,

Moving from Tablet to Mobile, I see the orage box is located on the border of the image.

Is it an issue to be resolved?

Hosuns Portfolio 3

Hosun Kang

[osgood_ · Accepted solution]

Remove the height from .box1 css

.box1 {

height: 208px;

background-color: palegreen;

margin: 0px 40px;

padding: 16px 32px;

background-image: url(mages/hero-background.jpg);

background-size: cover;

color: white;

}

Mobile view:

.box1 {

font-size: 10px;

height: 192px;

}

[Jon Fritz]

If removing the height setting changes your design too much, you can try a min-height setting instead.

That will give you a very similar overall base layout, while still allowing for your text area to grow in height as needed by the content as the screen size changes.