Images and Fonts not working properly on mobile

Site URL: https://piczaah.squarespace.com/

So, the correct font for "Zaah Tatsi" isn't showing up on mobile and neither is "Need a Photographer" in the heading, but everything else is fine.. 

The background image is very pixelated and zoomed in on the portfolio page but no where else. I'm not sure why that is because it's the same file and image for all pages?

I also don't know how i can center my text for "Zaah Tatsi" in mobile only, on mobile it skews to the right.

I'd also like to make the star images smaller, but I'm guessing that isn't possible.

I'm using 7.1

#1. Your font file is invalid.

Quote

@font-face {
    font-family: 'DarkGardenMK';
    src: url('FontURL')
}

Look at FontURL, you need to enter font file url, not enter text "FontURL"

#2. Can you take a screenshot of problem?

#3. Add to Design > Custom CSS

/* stars on mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1648936344284_109319 {
    width: 30%;
    margin: 0 auto;
}
div#block-yui_3_17_2_1_1648936344284_20125 {
    width: 30%;
    margin: 0 auto;
}
div#block-yui_3_17_2_1_1648936344284_100997 {
    width: 30%;
    margin: 0 auto;
}
}

7 hours ago, tuanphan said:

#1. Your font file is invalid.

Look at FontURL, you need to enter font file url, not enter text "FontURL"

#2. Can you take a screenshot of problem?

#3. Add to Design > Custom CSS

/* stars on mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1648936344284_109319 {
    width: 30%;
    margin: 0 auto;
}
div#block-yui_3_17_2_1_1648936344284_20125 {
    width: 30%;
    margin: 0 auto;
}
div#block-yui_3_17_2_1_1648936344284_100997 {
    width: 30%;
    margin: 0 auto;
}
}

 

Thank you!! The font and the stars both worked wonderfully!

The text for Zaah Tatsi still isn't centered though and here are the screenshots

The header and footer look great, but the middle section is very pixelated. I'm assuming it's because it had to be stretched out to be so long? I wasn't sure how to apply an image as a sitewide background, so I put the background image on the sections.

The text for Zaah Tatsi still isn't centered though and here are the screenshots

Edit your text >> delete blank space after text.

With other images, add this CSS

@media screen and (max-width:767px) {
div#page-section-62472c8f4925357b945459ac .span-3 .image-block {
    width: 30%;
    margin: 0 auto;
}
div#block-yui_3_17_2_1_1648847571631_344626~.row .image-block {
    width: 30%;
    margin: 0 auto;
}
}

23 hours ago, tuanphan said:

The text for Zaah Tatsi still isn't centered though and here are the screenshots

Edit your text >> delete blank space after text.

With other images, add this CSS

@media screen and (max-width:767px) {
div#page-section-62472c8f4925357b945459ac .span-3 .image-block {
    width: 30%;
    margin: 0 auto;
}
div#block-yui_3_17_2_1_1648847571631_344626~.row .image-block {
    width: 30%;
    margin: 0 auto;
}
}

 

• Member
• •  4