box in a box

Engaged ,
Jun 06, 2019 Jun 06, 2019

Copy link to clipboard

Copied

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

Q_Dw_22_box.png

Views

166

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

LEGEND , Jun 06, 2019 Jun 06, 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;

}

Likes

Translate

Translate
LEGEND ,
Jun 06, 2019 Jun 06, 2019

Copy link to clipboard

Copied

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;

}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 06, 2019 Jun 06, 2019

Copy link to clipboard

Copied

LATEST

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines