Skip to main content
Hosun
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
    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.

      O
      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;

      }

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices