Skip to main content
Hosun
Hosun
Inspiring
June 6, 2019
Answered

box in a box

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 is closed to new replies. Start a new post to keep the conversation going.
    osgood_Correct answer
    Legend
    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;

    }

    View reply

    2 replies

    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community 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.

    Translate
      osgood_Correct answer
      Legend
      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;

      }

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