Skip to main content
Hosun
Inspiring
June 6, 2019
Answered

box in a box

  • June 6, 2019
  • 2 replies
  • 419 views

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

    This topic has been closed for replies.
    Correct answer osgood_

    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;

    }

    2 replies

    Jon Fritz
    Adobe Expert
    June 6, 2019

    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.

    osgood_Correct answer
    Brainiac
    June 6, 2019

    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;

    }