Background image disappearing on phone widths

HTML & CSS
1

Hello, on this site I have a banner area with 2 equal columns and I have this necklace image in the wrapper for the section and then I have this image behind the left column on the left with the tagline. WHen it goes to the phone widths, the necklace image is supposed to go below the tagline area but as you see it disappears

Site is https://stargiftsong.com/

See screenshot

It’s supposed to look more like this.

Thank you for any help.

2

It’s the background-size: auto on the section. Removing that seems to fix it.

<section id="section-2-14" class=" ct-section " style=" background-image: linear-gradient(90deg, rgba(255,255,255,0.54) 200px, rgba(255,255,255,0)), url(https://cdn.shortpixel.ai/spai/q_lossy+ret_img/https://stargiftsong.com/wp-content/uploads/2020/03/hero-big-nacklace_0354.jpg);background-size:auto,  contain;">
     <div class="ct-section-inner-wrap">
          <div id="new_columns-22-452" class="ct-new-columns">
               <div id="div_block-23-452" class="ct-div-block">
                    <h2 id="headline-20-452" class="ct-headline banner-tagline">Jewelry That Weaves A Dream</h2>
                    <a id="link_button-27-452" class="ct-link-button button" href="/artwork/" target="_self">View My Artwork</a>
               </div>
               <div id="div_block-24-452" class="ct-div-block">
               </div>
          </div>
     </div>
</section>
3

Hi,

I think @DaveMaxwell already indentified the cause but I guess it is a typo:

Try switch the “auto, contain” value to “contain, auto” and see if that too solve the issue.

1 Like
4

I would instead suggest changing ‘contain’ to ‘cover’ instead as its the contain that will make the image shrink smaller than the available space.

Edit:

Erik beat me to it :slight_smile:

2 Likes
5

Thanks all I fixed it.

One more question. The last letter of the logo, the g, is getting cutoff on smaller sizes. Anyone know the issue with that?

Thanks again!

6

What was your solution?

I can’t replicate that at any size, the name wraps insted. Could you post a screen shot?

7

Yea it happens on my iphone 11.

See https://d.pr/i/ym9MN9

8

I couldn’t replicate because I didn’t load the logo svg in my view above. :blush:

The g cut off is present in all sizes in my browsers.

And if I view the source logo svg alone, it is cut by itself. I suggest you check the svg file and grow the width and viewbox (283.862) to contain the whole name.

https://stargiftsong.com/wp-content/uploads/2020/02/logo.svg

1 Like
9

Hi again,

Your svg (logo.svg) is set to use the font-family “MinionPro-Regular, Minion Pro” for the text “Star Gift Song”. If that font isn’t available on the machine the svg is displayed on, the browser will use another font that is installed and available to it.

That’s why I suggested to grow the svg width and viewbox to embrace also larger font-families.

Minion Pro is not a web safe font, so to avoid the use of a replacement the page loading the svg could be set to fetch that font from the web when the page is loaded.

To learn more, Google “web font”. Or better first read up on the subject at the Mozilla Dev.

Scroll down to the section Web fonts and the use of @font-face:

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.