yukohiguchi.gucci.com - design is broken

[webcompat-bot]

URL: http://yukohiguchi.gucci.com/?utm_source=twitter_jp

Browser / Version: Firefox Mobile 62.0 Operating System: Android 6.0.1 Tested Another Browser: No

Problem type: Design is broken Description: The text doesn't appier correctly. Steps to Reproduce:

From webcompat.com with ❤️

[softvision-sergiulogigan]

The text is truncated; it's not displayed using the whole area assigned.

This seem to be the affected area:

<div class="text in" data-in="">
    <div class="flower in" data-in="">
        <img src="assets/images/chan-flower.png" alt="">
        </div>
        <h3>Hitotsume-Chan</h3>
        <div class="lettering">
            <p aria-label="ひとつめちゃん">
                <span class="char1" aria-hidden="true">ひ</span>
                <span class="char2" aria-hidden="true">と</span>
                <span class="char3" aria-hidden="true">つ</span>
                <span class="char4" aria-hidden="true">め</span>
                <span class="char5" aria-hidden="true">ち</span>
                <span class="char6" aria-hidden="true">ゃ</span>
                <span class="char7" aria-hidden="true">ん</span>
            </p>
            <p aria-label="「太古から生息する植物の一種。">
                <span class="char1" aria-hidden="true">「</span>
                <span class="char2" aria-hidden="true">太</span>
                <span class="char3" aria-hidden="true">古</span>
                <span class="char4" aria-hidden="true">か</span>
                <span class="char5" aria-hidden="true">ら</span>
                <span class="char6" aria-hidden="true">生</span>
                <span class="char7" aria-hidden="true">息</span>
                <span class="char8" aria-hidden="true">す</span>
                <span class="char9" aria-hidden="true">る</span>
                <span class="char10" aria-hidden="true">植</span>
                <span class="char11" aria-hidden="true">物</span>
                <span class="char12" aria-hidden="true">の</span>
                <span class="char13" aria-hidden="true">一</span>
                <span class="char14" aria-hidden="true">種</span>
                <span class="char15" aria-hidden="true">。</span>
            </p>
            <p aria-label="動き回り、他の生き物の生活を">
                <span class="char1" aria-hidden="true">動</span>
                <span class="char2" aria-hidden="true">き</span>
                <span class="char3" aria-hidden="true">回</span>
                <span class="char4" aria-hidden="true">り</span>
                <span class="char5" aria-hidden="true">、</span>
                <span class="char6" aria-hidden="true">他</span>
                <span class="char7" aria-hidden="true">の</span>
                <span class="char8" aria-hidden="true">生</span>
                <span class="char9" aria-hidden="true">き</span>
                <span class="char10" aria-hidden="true">物</span>
                <span class="char11" aria-hidden="true">の</span>
                <span class="char12" aria-hidden="true">生</span>
                <span class="char13" aria-hidden="true">活</span>
                <span class="char14" aria-hidden="true">を</span>
            </p>
            <p aria-label="のぞいていろいろなことを学び">
                <span class="char1" aria-hidden="true">の</span>
                <span class="char2" aria-hidden="true">ぞ</span>
                <span class="char3" aria-hidden="true">い</span>
                <span class="char4" aria-hidden="true">て</span>
                <span class="char5" aria-hidden="true">い</span>
                <span class="char6" aria-hidden="true">ろ</span>
                <span class="char7" aria-hidden="true">い</span>
                <span class="char8" aria-hidden="true">ろ</span>
                <span class="char9" aria-hidden="true">な</span>
                <span class="char10" aria-hidden="true">こ</span>
                <span class="char11" aria-hidden="true">と</span>
                <span class="char12" aria-hidden="true">を</span>
                <span class="char13" aria-hidden="true">学</span>
                <span class="char14" aria-hidden="true">び</span>
            </p>
            <p aria-label="真似をしたりしていますが">
                <span class="char1" aria-hidden="true">真</span>
                <span class="char2" aria-hidden="true">似</span>
                <span class="char3" aria-hidden="true">を</span>
                <span class="char4" aria-hidden="true">し</span>
                <span class="char5" aria-hidden="true">た</span>
                <span class="char6" aria-hidden="true">り</span>
                <span class="char7" aria-hidden="true">し</span>
                <span class="char8" aria-hidden="true">て</span>
                <span class="char9" aria-hidden="true">い</span>
                <span class="char10" aria-hidden="true">ま</span>
                <span class="char11" aria-hidden="true">す</span>
                <span class="char12" aria-hidden="true">が</span>
            </p>
            <p aria-label="無害です。植物なので">
                <span class="char1" aria-hidden="true">無</span>
                <span class="char2" aria-hidden="true">害</span>
                <span class="char3" aria-hidden="true">で</span>
                <span class="char4" aria-hidden="true">す</span>
                <span class="char5" aria-hidden="true">。</span>
                <span class="char6" aria-hidden="true">植</span>
                <span class="char7" aria-hidden="true">物</span>
                <span class="char8" aria-hidden="true">な</span>
                <span class="char9" aria-hidden="true">の</span>
                <span class="char10" aria-hidden="true">で</span>
            </p>
            <p aria-label="光合成をします。">
                <span class="char1" aria-hidden="true">光</span>
                <span class="char2" aria-hidden="true">合</span>
                <span class="char3" aria-hidden="true">成</span>
                <span class="char4" aria-hidden="true">を</span>
                <span class="char5" aria-hidden="true">し</span>
                <span class="char6" aria-hidden="true">ま</span>
                <span class="char7" aria-hidden="true">す</span>
                <span class="char8" aria-hidden="true">。</span>
            </p>
            <p aria-label="口はありませんが">
                <span class="char1" aria-hidden="true">口</span>
                <span class="char2" aria-hidden="true">は</span>
                <span class="char3" aria-hidden="true">あ</span>
                <span class="char4" aria-hidden="true">り</span>
                <span class="char5" aria-hidden="true">ま</span>
                <span class="char6" aria-hidden="true">せ</span>
                <span class="char7" aria-hidden="true">ん</span>
                <span class="char8" aria-hidden="true">が</span>
            </p>
            <p aria-label="テレパシーで会話します」">
                <span class="char1" aria-hidden="true">テ</span>
                <span class="char2" aria-hidden="true">レ</span>
                <span class="char3" aria-hidden="true">パ</span>
                <span class="char4" aria-hidden="true">シ</span>
                <span class="char5" aria-hidden="true">ー</span>
                <span class="char6" aria-hidden="true">で</span>
                <span class="char7" aria-hidden="true">会</span>
                <span class="char8" aria-hidden="true">話</span>
                <span class="char9" aria-hidden="true">し</span>
                <span class="char10" aria-hidden="true">ま</span>
                <span class="char11" aria-hidden="true">す</span>
                <span class="char12" aria-hidden="true">」</span>
            </p>
        </div>
    </div>

Disabling the position: absolute; property of /html/body/div[5]/div/div/section/div/div/div/div[2], fixes the issue.

[karlcow]

@softvision-sergiulogigan yup that's the fix!

in http://yukohiguchi.gucci.com/assets/styles/main.min.css

@media (max-width:49.99em) {
 .content .text {
  /*! position:absolute; */top:10%;
  left:5%;
  margin-bottom:0
 }
}

[karlcow]

The page to contact them. https://www.gucci.com/us/en/st/contact-us?location=JP

[adamopenweb]

Contacting via site form and also reaching out over LinkedIn.

[cipriansv]

I retested the issue and it is still reproducible on my side.

Tested with: Browser / Version: Firefox Nightly 68.0a1 (2019-06-10), Firefox Fenix (Preview) 1.0.1923 Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)

[cipriansv]

After retesting the issue I noticed that the layout has changed.

Tested with: Browser / Version: Firefox Nightly 200908(🦎 82.0a1-20200902095359) Operating System: OnePlus6 (Android 10) - 1080 x 2280 pixels (~402 ppi pixel density)

Closing the issue accordingly.