Jump to content

Images and Fonts not working properly on mobile

Recommended Posts

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

Link to comment
  • Replies 4
  • Views 429
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

#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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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.

 

Screenshot_20220406-101116_Chrome.jpg

Screenshot_20220406-101121_Chrome (1).jpg

Screenshot_20220406-101130_Chrome.jpg

Link to comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Thank you! I was able to apply a sitewide background in CSS, so the image problem is solved! Thank you so much! It worked!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.